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网 页 与 网 站 的 常识 


互联 网 在 现实 生活 中 的 应 用 很 广泛 ， 在 互联 网 上 可 以 聊天 、 玩 游 
戏 、 查 阅 资料 等 ， 更 为 重要 的 是 在 互联 网 上 还 可 以 进行 广告 宣传 和 购 
物 。 互 联网 给 现实 生活 带 来 很 大 的 方便 。 

在 制作 一 个 网 站 前 ， 需 要 对 网 页 和 网 站 的 常识 有 所 了 解 ， 包 括 网 站 
域名 、 网 站 空间 、XHTML、 网 站 开发 语言 、 动 态 和 静态 网 页 等 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


@ 互联 网 常识 ， 了 解 网 站 组 成 要 素 、 网 站 域名 、 域 名 解析 、 虚 
拟 主机 等 网 络 基础 知识 ， 可 以 更 好 地 辅助 网 站 制作 。 

e@ 网 页 常识 ， 了 解 HTML 和 XHTML、 网 页 的 分 类 以 及 网 页 源 代码 。 

@ 网 站 常识 : 了解 网 站 开发 语言 、 动 态 和 静态 网 站 、 网 站 建设 
流程 。 

”初学 者 常见 问题 ,介绍 初学 者 在 网 页 制作 中 常见 的 问题 ， 包 
括 XHTML 语言 的 特点 、 浏 览 器 的 作用 、 静 态 网 页 和 动态 网 页 
的 区 别 。 


人 1 互联 网 常识 


本 节 将 主要 介绍 与 互联 网 相关 的 常识 。 网 站 建设 中 的 主要 内 容 是 网 站 ， 对 互联 网 基本 常 
识 有 基本 的 了 解 ， 有 助 于 更 好 地 理解 网 站 是 如 何 呈 现 给 用 户 的 等 基本 原理 ， 同 时 对 于 希望 
己 建 站 的 读者 会 非常 有 帮助 。 


1.1.1 组 成 网 站 的 要 素 


个 网 站 3 部 分 组 成 : 域名 、 空 间 和 网 站 程序 。 
网 站 程序 主要 是 指 经 过 开发 的 网 站 系统 ， 一 般 也 称 作 网 站 源 代码 。 
网 站 源 代码 包括 与 网 站 建设 有 关 的 所 有 文件 代码 ， 这 些 代码 有 用 html、CSS、JavaScript 
编写 的 代码 ， 也 有 用 后 合 语言 编写 的 PHP、JSP、ASP 等 代码 。 
电脑 上 显示 的 网 站 都 是 由 一 个 个 网 页 组 成 的 。 网 站 是 网 页 的 集合 ， 包 括 一 个 首页 和 若干 
个 网 页 。 首 页 是 一 个 网 站 的 门面 ， 也 是 访问 量 最 大 的 一 个 页 面 ， 访 问 者 可 以 通过 首页 进入 到 
网 站 的 各 个 分 页 ， 一 个 网 站 的 组 成 如 图 1.1 所 示 。 
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时 存放 网 站 的 CSS 文 件 

| 存放 网 站 的 图 片 ， 包括 各 种 格式 (jpg、png、gif 等 ) 
| 存放 网 站 的 JavaScript 文 件 

a 存放 网 站 的 临时 图 片 ， 比 如 经 常 更 新 的 产品 图 片 等 


全 indexhtml 网 站 首页 


全 producthtml 网 站 子 页 


图 1.1 网 站 组 成 


每 个 网 页 都 是 一 个 文件 ， 这 些 文件 有 不 同 的 扩展 名 。 不 同 语言 开发 的 网 页 后 缀 名 也 不 尽 
相同 ， 常 见 的 网 页 后 级 名 有 : .htm、.html、.xhtml、.asp、.aspx、.php、.jsp 等 。 

每 个 网 页 显示 出 不 同 的 颜色 搭配 、 灵 活 多 变 的 布局 ， 这 些 是 因为 在 网 页 的 文件 中 引入 了 
CSS 样 式 表 。 

如 果 希 望 用 户 能 与 网 站 进行 交互 或 为 网 页 添加 动态 效果 ， 则 还 需要 在 网 页 中 引入 
JavaScript 代 码 。 

在 网 站 的 前 合 页面 中 ， 离 不 开 HTML、CSS 与 JavaScript 这 3 种 技术 : 由 HTML 负 责 描述 页 面 
数据 和 信息 ;CSS 负 责 控 制 外 观 ，JavaScript 则 用 于 响应 用 户 的 操作 ， 为 网 页 添加 动态 的 功能 。 


1.1.2 网 站 域名 


简单 地 说 ， 域 名 就 是 互联 网 上 主机 的 名 字 ， 它 采用 层次 结构 ， 每 一 层 构成 一 个 子 域名 ， 子 
域名 之 间 用 圆 点 隔 开 ， 自 左 至 右 分 别 为 :计算 机 名 、 网 络 名 、 机 构 名 、 最 高 域名 。 每 个 域名 对 
应 互联 网 上 某 一 合计 算 机 或 计算 机 组 的 名 称 ， 用 来 在 网 络 的 数据 传输 中 标识 服务 器 的 位 置 。 

域名 可 分 为 不 同 级 别 ， 包 括 项 级 域名 、 二 级 域名 等 。 


@ 顶级 域名 是 指 网 页 地 址 中 的 最 高 域名 ， 常 用 的 有 : com (商业 机 构 ) 、net (网络 服务 
机 构 ) 、gov (政府 机 构 ) 、org〔 非 盈利 性 组 织 ) 、edu (教育 部 门 ) 、int (国际 机 
构 ) 。 这 些 域名 的 注册 服务 由 多 家 机 构 承 担 。 

@ 二 级 域名 是 指 顶级 域名 之 下 的 域名 ， 在 国际 顶级 域名 下 ， 它 是 指 域名 注册 人 的 网 上 
名 称 ， 例 如 ibm、yahoo、microsoft 等 。 


在 联网 的 电脑 上 打开 浏览 器 ， 在 地 址 栏 中 输入 www.baidu.com 或 www.sogou.com， 搜 索 
需要 的 信息 ， 这 是 日 常生 活 中 经 常 做 的 事情 。 在 浏览 器 的 地 址 栏 中 输入 的 www.baidu.com 或 
www.sogou.com 就 是 两 个 不 同 的 网 站 域名 。 

以 一 个 常见 的 域名 为 例 进行 说 明 ，www.baidu.com 由 两 部 分 组 成 ，“baidu” 是 这 个 域名 
的 主体 ， 也 是 一 个 二 级 域名 ，“com” 则 是 该 域名 的 后 经， 代表 的 是 一 个 com 国 际 域名 ， 是 
顶级 域名 ， 而 前 面 的 www 是 Intemet 提 供 的 万 维 网 服务 ， 用 于 提供 浏览 器 访问 网 页 的 服务 。 图 
1.2 是 域名 层级 结构 图 。 
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图 1.2 域名 层级 结构 


1.1.3 域名 解析 


互联 网 上 的 每 全 电脑 都 有 一 个 唯一 的 P 地 址 。IP 地 址 就 像 是 我 们 的 家 庭 住址 一 样 ， 如 果 
你 要 写 信 给 一 个 人 ， 就 要 知道 他 的 地 址 ， 这 样 邮 递 员 才 能 把 信 送 到 。 计 算 机 发 送信 息 就 好 比 
是 邮递 员 ， 它 必须 知道 唯一 的 “家 庭 地 址 ” 才 不 至 于 把 信 送 错 人 家 。 只 不 过 我 们 的 地 址 使 用 
文字 来 表示 ， 计 算 机 的 地 址 用 二 进 制 数字 表示 。 

随 着 网 络 的 普及 ， 上 网 的 人 越 来 越 多 ， 由 于 四 地 址 全 是 数字 ， 为 了 便于 用 户 记 忆 ， 互 联网 
上 引进 了 域名 服务 系统 DNS。 当 用 户 键入 某 个 域名 的 时 候 ， 这 个 信息 首先 到 达 提供 此 域名 解析 的 
服务 器 上 ， 再 将 此 域名 解析 为 相应 网 站 的 中 地 址 ， 完 成 这 一 任务 的 过 程 就 称 为 域名 解析 。 

域名 解析 的 大 臻 过程 是 ， 当 一 台 机 器 a 向 其 域名 服务 器 A 发 出 域名 解析 请 求 时 ， 如 果 A 可 
以 解析 ， 则 将 解析 结果 发 给 8， 否则 ，A 将 向 其 上 级 域名 服务 器 B 发 出 解析 请 求 ， 如 果 B 能 解 
析 ， 则 将 解析 结果 发 给 as， 如 果 B 无 法 解析 ， 则 将 请 求 发 给 再 上 一 级 域名 服务 器 C…… 如 此 下 
去 ， 直 至 解析 到 为 止 。 


1.1.4 网 站 空间 


网 站 空间 是 存放 网 站 内 容 的 空间 。 例 如 ， 在 一 台 服 务 器 上 分 配 一 个 文件 夹 来 存放 网 站 的 
内 容 ， 则 这 个 文件 夹 就 是 网 站 空间 。 网 站 空间 能 存放 网 站 文件 和 资料 ， 包 括 文字 、 文 档 、 数 
据 库 、 网 站 的 页 面 、 图 片 等 文件 。 

网 站 空间 按照 空间 形式 、 程 序 语言 和 空间 线路 可 分 为 不 同 的 种 类 。 

1. 按 空间 形式 分 类 

e 虚拟 空间 : 90% 以 上 的 企业 网 站 都 采取 这 种 形式 ， 主 要 是 空间 提供 商 提 供 专业 的 技术 

支持 和 空间 维护 ， 且 成 本 低廉 。 

@ 合租 空间 : 中 型 网 站 可 以 采用 这 种 形式 ， 一 般 是 几 个 或 者 几 十 个 人 合作 一 台 服 务 器 。 

@ 独立 主机 : 安全 性 能 要 求 极 高 以 及 网 站 访问 速度 要 求 极 高 的 企业 网 站 可 以 采用 ， 成 

本 较 高 。 

2. 按 程序 语言 分 类 

@ ASP 虚 拟 主 机 : 支持 ASP+Access， 成 本 较 低 ， 安 全 性 能 也 较 低 。 

e@ PHP 虚拟 主机 : 支持 PHP， 一 般 会 赠送 MySQL 数 据 库 (PHP 程 序 需 要 MySQL 数 据 库 
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才能 执行 ) ， 成 本 较 低 ， 高 效 稳定 。 
@ JSP 庶 拟 主机 : 支持 JSP， 需 要 MySQL 数 据 库 支 持 。 
3. 按 空间 线路 分 类 


电信 主机 : 接 入 光纤 为 电信 网 络 。 

网 通 主机 ， 接 入 光纤 为 网 通 网 络 。 

铁通 主机 : 接 入 光纤 为 铁通 网 络 。 

双 线 主机 : 能 实现 电信 和 网 通 网 络 的 自动 切换 。 
多 线 主 机 : 能 实现 多 种 接 入 线路 的 自动 切换 。 


1.1.5 虚拟 主机 


网 络 时 代 的 到 来 ， 促 进 了 互联 网 企业 的 发 展 。 随 着 网 站 数量 的 迅速 增加 ， 主 机 数量 已 经 
远 远 不 能 满足 需要 ， 进 而 促使 了 虚拟 主机 的 出 现 。 因 此 ， 现 在 通常 所 说 的 网 站 空间 ， 一 般 多 
指 虚 拟 主 机 。 

虚拟 主机 是 在 服务 器 上 分 出 一 定 的 磁盘 空间 供用 户 放置 网 站 文件 、 程 序 等 ， 并 提供 必要 
的 网 站 功能 、 数 据 存放 和 传输 功能 。 同 时 ， 每 一 块 被 划分 好 的 空间 都 设置 为 一 台 “虚拟 ” 
的 服务 器 ， 每 一 个 虚拟 主机 都 具有 独立 的 域名 和 完整 的 Internet 服 务 器 〈 支 持 WWW、FTP、 
E-mail 等 ) 功能 。 

通常 中 小 型 企业 做 网 站 都 不 会 自己 架设 服务 器 ， 而 是 选择 以 虚拟 主机 空间 作为 放置 网 站 
内 容 的 网 站 空间 。 

现在 ， 无 论 是 对 于 中 小 企业 还 是 个 人 用 户 来 说 ， 拥 有 自己 的 网 站 已 不 再 是 一 件 难事 ， 投 
资 几 百 元 就 可 以 很 容易 地 通过 向 网 站 托管 服务 商 租用 虚拟 主机 ， 利 用 这 种 方式 来 建立 网 站 。 
图 1.3 是 用 户 访 问 虚 拟 主 机 的 过 程 。 
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访问 wwwweblcom 访问 www weblcom 


访问 www webl com 


= 


I 
nh mn 


webl 庶 拟 目录 。 web2 虚 拟 目录 。 。 web3 虚 拟 目录 


图 1.3 用 户 访问 虚拟 主机 
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人 2 网 页 常识 


本 节 将 主要 介绍 与 网 页 有 关 的 常识 。 这 些 常识 是 制作 一 个 网 站 的 基础 ， 了 解 本 节 内 容 有 
助 于 快速 制作 出 高 质量 的 、 语 义 良 好 的 网 页 。 


1.2.1 网 页 的 结构 描述 语言 HTML 


HTML 是 一 种 用 来 描述 网 页 的 语言 。 它 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 。 标 记 语 
由 一 套 标 记 标签 组 成 。HTML 就 是 使 用 这 些 标 记 标 签 来 描述 网 页 的 。 

HTML 中 每 个 标签 都 有 自己 的 含义 ， 都 有 自己 适用 的 范围 ， 各 标签 不 能 随意 滥用 和 和 忽 
略 ， 这 就 是 HTML 标 签 的 语义 化 。 

例如 在 一 个 页 面 中 ， 用 了 几 十 个 甚至 上 百 个 <div>， 这 是 个 无 意义 的 标签 ， 只 是 表示 文档 
中 的 一 个 分 区 而 已 ， 非 常 不 利于 后 期 的 维护 ， 而 <table> 标 签 表示 表格 ， 并 不 是 说 DIV+CSS 结 
构 的 页 面 就 不 能 使 用 ， 该 用 的 时 候 ， 我 们 还 是 要 大 胆 使 用 。 

使 用 标签 语义 化 有 很 多 好 处 : 


语义 化 的 网 页 ， 容 易 被 搜索 引擎 抓 取 ， 便 于 网 站 的 推广 。 

去 掉 样 式 或 者 样式 丢失 时 页 面 结构 依然 清晰 分 明 。 

移动 设备 能 够 更 加 完美 地 展示 你 的 网 页 。 

阅读 器 会 根据 标签 的 语义 自动 解析 ， 呈 现 更 容易 阅读 的 内 容 形式 。 
便于 后 期 的 开发 以 及 维护 ， 团 队 合作 效率 提高 。 

网 页 制作 中 常用 的 HIML 标 签 的 英文 全 拼 和 中 文 翻译 如 表 1.1 所 示 。 


表 1.1 常见 的 HTML 标 签 语义 汇总 
标签 名 称 标签 英文 全 拼 


加 mm 
span span 
ordered list 


囊 


排序 列表 
不 排序 列表 


Unordered list 
list item 

definition list 
definition term 


definition description 
header 1 to header 6 
paragraph 
anchor 


Ppreformatted 


strong 
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( 续 表 ) 


emphasized 强调 
bold 粗 体 


标签 名 称 标签 英文 全 拼 标签 中 文 翻译 
i 


italic 斜体 
fieldset fieldset 域 集 
legend legend 图 标 


caption 标题 

area 图 像 映射 内 部 的 区 域 

form form 表单 

img image 图 像 

input input 输入 域 

8 

内 到 

下 列表 

TT 7 

文本 区 

ee 

表格 的 主体 部 分 

[| 

下 了 
下 的 表 了 元 


J ee | 的 村 
表格 的 和 


1.2.2 XHTML 和 HTML 的 区 别 


HTML (HyperText Mark-up Language) 即 超 文 本 标记 语言 或 超 文本 链接 标识 语言 ， 是 
构成 网 页 文档 的 主要 语言 。XHTML 是 指 扩展 超 文本 标签 语言 (EXtensible HyperText Markup 


Language) ， 是 更 严格 、 更 纯净 的 HIML 版 本 。XHTML 在 语法 上 更 加 严格 。 


洛 XHTML 1.0 在 2000 年 1 月 26 日 成 为 W3C 的 推荐 标准 。 


使 用 XHTML 的 网 站 更 利于 搜索 引擎 抓 取 网 页 ， 同 时 ， 开 发 者 能 够 更 容易 调试 和 解决 问 


题 。XHTML 区 别 于 HTML 的 规则 如 下 : 


在 XHTML 文件 的 开始 处 要 声明 DTD。 
所 有 的 标签 和 标签 的 属性 都 必须 小 写 ， 属 性 值 可 以 大 写 。 
属性 值 必须 用 引号 括 起 来 ， 单 引号 、 双 引号 都 可 以 。 


所 有 的 标签 都 必须 被 关闭 ， 空 标签 也 不 例外 。 例 如 在 XHTML 中 ，<br> 要 写成 <br 人 >。 


XHTMLI 文件 的 结构 包括 头 部 (Head) 、 主 体 (Body) 两 大 部 分 ， 其 中 头 部 描述 浏览 器 


所 需 的 信息 ， 而 主体 则 包含 所 要 说 明 的 具体 内 容 。 
例如 ， 代 码 1-1 是 一 个 XHTML 文件 。 
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代码 1-1 


01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 

02 <html xmlns="http://www.w3.0rg/1999/xhtml"> 

03 <head> 

04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

05 <title> 网 页 标题 </title> 

06 <link href="css/home.css" rel="stylesheet" type="text/css" /> 

07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div id="hd">/*..modules..*/</div> 

1 <div id="bd">/*..modules..*/</div> 

12 <div id="ft">/*..modules..*/</div> 

13 </div> 

14 </body> 

15 <script type="text/javascript" src="js/home.js"></script> 

16 </html> 


第 01 行 是 网 页 的 <!IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必 须 是 HTML 文档 的 第 一 行 ， 位 
于 <html> 标签 之 前 。 第 02 行 和 第 16 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTML 文档。 

第 03~07 行 是 HTML 文 档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 的 元 
素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 第 04 行 用 <meta> 标 签 定义 
网 页 的 编码 方式 是 utf-8。 经 常 使 用 的 编码 格式 有 UTF-8 和 GBK 两 种 ，UTF-8 是 针对 英文 网 页 
设计 的 编码 格式 ，GBK 是 针对 中 文 网 页 设计 的 编码 格式 ， 在 没有 特殊 需求 的 情况 下 统一 使 用 
UTF-8 编 码 ， 因 为 UTF-8 是 国际 编码 ， 通 用 性 好 ， 如 PHP、ASP 等 一 般 都 使 用 UTF-8 编 码 ， 所 
以 与 其 通信 时 可 以 防止 出 现 乱码 和 不 必要 的 麻烦 。 

第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 引用 的 样式 文件 的 地 址 。 

第 08~14 行 是 网 页 主体 ， 其 中 第 08 行 和 第 14 行 是 <body> 标 签 。<body> 标 签 用 于 定义 
HTIML 文 档 的 主体 。 


奸 “CSS 一 般 位 于 XHTML 文件 的 头 部 ，JavaScript 一 般 位 于 XHTML 文件 的 末尾 ， 防 止 JavaScript 文 
> ” 件 在 加 载 时 出 现 因 加 载 时 间 过 长 而 导致 页 面 出 现 空白 等 糟糕 的 用 户 体验 。 


1.2.3 网 页 的 分 类 


网 页 分 为 动态 网 页 和 静态 网 页 。 


。 静态 网 页 的 网 页 里 面 没有 程序 代码 。 这 种 网 页 通常 以 扩展 名 .htm 或 是 .html 存 储 ， 表 示 
里 面 的 内 容 是 以 HTML 语 言 所 撰写 。 用 户 在 浏览 静态 网 页 的 时 候 ， 网 站 服务 器 不 会 执 
行 任何 程序 ， 而 是 把 静态 文件 传 给 客户 端的 浏览 器 直接 进行 解析 。 

e 动态 网 页 的 网 页 里 面 含有 程序 代码 。 这 种 网 页 通常 以 扩展 名 .asp、-:jsp 或 .php 存储 ， 表 示 
里 面 的 内 容 是 动态 网 页 ， 有 需要 执行 的 程序 。 用 户 在 浏览 这 种 网 页 时 必须 由 服务 器 先 
执行 程序 后 ， 再 将 执行 完 的 结果 下 载 给 客户 端的 浏览 器 才能 看 到 页 面 。 这 种 网 页 会 在 
服务 器 执行 一 些 程序 ， 由 于 执行 程序 时 的 条 件 不 同 ， 所 以 执行 的 结果 也 可 能 会 有 所 不 
同 ， 因 此 称 为 动态 网 页 。 
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1.2.4 网 页 的 源 代码 


网 页 的 源 代 码 ， 也 称 为 源 程 序 ， 是 指 未 编译 的 文本 代码 或 一 个 网 站 的 全 部 源码 文件 。 网 
站 中 使 用 的 文件 都 可 以 称 为 网 页 的 源 代码 。 

在 浏览 器 中 浏览 某 个 网 页 时 ， 在 页 面 空 白 处 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
“查看 页 面 源 代码 ”， 就 可 以 在 打开 的 新 窗口 中 看 到 网 页 的 HTML 源 代码 。 


1.3 ”网 站 常识 


本 节 将 主要 介绍 与 网 站 有 关 的 常识 。 了 解 这 些 基础 知识 ， 有 助 于 把 握 建设 网 站 的 整体 流 
程 ， 方 便 与 其 他 开发 人 员 进 行 沟通 和 协作 。 


1.3.1 网 站 开发 语言 


网 站 的 制作 离 不 开 网 站 开发 语言 ， 从 前 端 到 后 端 ， 从 标记 语言 到 开发 语言 ， 各 种 语言 层 
出 不 穷 。 

网 站 开发 语言 按 层级 分 为 : 标记 层 (HTML) 、 修 饰 层 (CSS) 、 客 户 端 脚本 层 
(JavaScript) 、 服 务 器 端 (PHP，ASPNET) 。 

常用 的 标记 语言 主要 有 1: 


e HIML 
e XHTML 
e XML 


常用 的 样式 表 与 转换 语言 主要 有 : 
e CSS 
® XSL 
常用 的 客户 端 脚本 语言 主要 有 : 


@ JavaScript 
® AJAX 
® DOM Scripting 


常用 的 服务 器 端 开发 语言 主要 有 : 
® ASP 


® ASPNET 
e JSP 
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® Perl 

e PHP 

® Python 

常用 的 数据 库 语言 主要 有 : 

e MySQL 

® Oracle 

对 于 入 门 者 而 言 ， 建 议 按照 HTML 一 CSS 一 JS 一 PHP 一 MySQL 进 行 学 习 ， 不 管 如 何 选 
择 ，HTML 都 是 最 重要 的 开端 。 


1.3.2 动态 网 站 和 静态 网 站 


在 网 站 设计 中 ， 纯 粹 HTML 格 式 的 网 页 通常 被 称 为 “静态 网 页 ”， 早 期 的 网 站 一 般 都 是 
静态 网 页 制作 的 。 

静态 网 页 的 网 址 形式 通常 以 htm、.html、.shtml、.xml 等 为 后 级 。 在 HTML 格 式 的 网 页 上 
也 可 以 出 现 各 种 动态 的 效果 ， 如 .gif 格式 的 动画 、Flash、 滚 动 字 母 等 ， 这 些 “动态 效 果 ” 只 是 
视觉 上 的 ， 与 动态 网 页 是 不 同 的 概念 ， 系列 静态 网 页 构成 的 网 站 就 是 静态 网 站 。 

动态 网 站 并 不 是 指 具 有 动画 功能 的 网 站 ， 而 是 指 网 站 内 容 可 根据 不 同情 况 动态 变更 的 网 
站 ， 一 般 情况 下 动态 网 站 通过 数据 库 进 行 架 构 。 动 态 网 站 除了 要 设计 网 页 外 ， 还 要 通过 数据 
库 和 编写 程序 来 使 网 站 具有 更 多 自动 的 和 高 级 的 功能 。 


1.3.3 网 站 建设 流程 


一 个 网 站 从 开始 到 上 线 要 经 过 以 下 几 个 流程 : 注册 域名 、 购 买 空间 、 策 划 主 题 、 设 计 网 
页 、 制 作 页 面 、 添 加 程序 、 添 加 信息 、 测 试 、 上 传 到 空间 。 


1:4 “初学 者 常见 问题 


本 节 将 主要 介绍 初学 者 在 网 页 制作 中 常见 的 问题 ， 包 括 XHTML 语 言 的 特点 、 浏 览 器 的 
作用 、 静 态 网 页 和 动态 网 页 的 区 别 。 


1.4.1 XHTML 语言 的 特点 


HTML 是 一 种 基本 的 网 页 设计 语言 ，XHTML 与 HTML 相似 ， 也 是 一 种 网 页 设计 语言 ， 但 
XHTML 是 基于 XML 的 置 标语 言 ， 是 一 种 类 似 HIML 的 XML， 因 此 ， 本 质 上 ，XHTML 是 一 种 
过 渡 技 术 ， 结 合 了 XML 的 强大 功能 及 HTML 的 简单 特性 。 
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XHTML 语言 的 特点 主要 包括 以 下 3 个 方面 : 


e@ XHTML 语言 的 代码 规范 、 简 洁 。 例 如 ， 标 签 必须 闭合 、 标 签 必须 小 写 等 。 

e@ XHTML 语言 编写 的 网 页 有 更 好 的 兼容 性 。 因 浏览 器 不 同 ， 网 页 显示 效果 不 同 是 网 页 
制作 者 常常 面 对 的 问题 ， 运 用 XHTML 语言 编写 的 网 页 能 更 好 地 适应 各 种 浏览 器 ， 从 
而 避免 了 一 部 分 网 页 兼容 问题 。 

e@ HTML 是 Web 标 准 的 一 部 分 ， 能 很 好 地 在 无 线 设备 等 其 他 阅读 器 中 运行 。 


1.4.2 浏览 器 的 作用 


浏览 器 是 可 以 显示 服务 器 上 的 HTML、ASP、PHP 等 文件 内 容 ， 并 让 用 户 与 这 些 文件 进 
行 互动 的 一 种 软件 。 浏 览 器 主要 通过 HTTP 协 议 与 服务 器 交互 并 获取 网 页 。 

大 部 分 的 浏览 器 除了 能 显示 HTML 文 件 之 外 ， 还 能 显示 JPEG、PNG、GIF 等 格式 的 图 
像 ， 并 且 能 够 扩展 支持 众多 的 插件 ， 安 装 插件 的 浏览 器 还 可 以 浏览 网 页 中 典 入 的 图 像 、 动 
画 、 视 频 、 声 音 、 流 媒体 等 。 

个 人 电脑 上 常见 的 网 页 浏览 器 包括 Internet Explorer、Firefox、Safari、Opera、Google 
Chrome 等 ， 浏 览 器 是 用 户 电 脑 中 经 常 使 用 到 的 客户 端 程序 。 


1.4.3 静态 网 页 和 动态 网 页 的 区 别 


动态 网 站 和 静态 网 站 具有 各 自 的 功能 和 特点 : 


@ 动态 网 页 中 包含 有 服务 器 端 脚本 ， 所 以 页 面 文件 名 常 以 .asp、.jsp、.php 等 为 后 缓 ; 动 
态 网 站 可 以 实现 交互 功能 ， 如 用 户 注册 、 信 息 发 布 、 产 品 展示 、 订 单 管理 等 ， 并 且 
以 数据 库 技术 为 基础 ， 可 以 大 大 降低 网 站 维护 的 工作 量 ; 用 于 动态 网 站 开发 的 语言 
主要 有 ASP、ASPNET、PHP、JSP。 

e 静态 页 面 以 htm、.html、.shtml 等 为 后 级 ， 静 态 网 页 没有 数据 库 的 支持 ， 在 网 站 制作 
和 维护 方面 工作 量 较 大 ， 因 此 当 网 站 信息 量 很 大 时 完全 依靠 静 态 网 页 制作 方式 比较 
困难 ; 静态 网 页 在 功能 方面 有 较 大 的 限制 ; 用 于 静态 网 页 编写 的 语言 主要 是 HTML、 
CSS、JavaScript。 


在 一 个 网 站 上 ， 动 态 网 页 和 静态 网 页 常常 配合 使 用 。 
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网 站 制作 基础 


当 用 户 浏览 网 站 时 ， 看 到 的 一 个 个 网 页 都 是 开发 人 员 提 前 制作 好 
的 ， 掌 握 网 页 制作 知识 是 制作 网 站 的 基础 ， 本 章 将 对 网 页 制作 中 涉及 的 
基础 知识 和 实际 项 目 中 的 关键 内 容 进行 详细 介绍 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


@ 如何 使 用 Dreamweaver 建 站 : 简单 介绍 Dreamweaver 软 件 的 使 

用 以 及 如 何 使 用 Dreamweaver 定 义 站 点 、 制 作 动 /静态 网 页 。 

策划 网 站 : 了 解 网 站 主题 的 选取 、 如 何 分 析 网 站 需求 以 及 网 

站 交互 设计 。 

@ 视觉 设计 : 了 解 视觉 设计 的 范围 和 要 点 。 

@ 页 面 开 发 : 讲解 网 站 制作 必 备 知识 点 ， 包 括 切 图 、XHTML 标 
签 和 语义 化 、XHTML 重 构 、CSS 选 择 器 、CSS 盒 模型 、CSS 
Sprite、 网 站 文件 规划 等 。 


Q 


星 ”本 章 内 容 是 对 网 页 制作 涉及 的 基础 知识 进行 简要 介绍 ， 详 细 知 识 点 请 参考 关于 介绍 XHTML 及 


CSS 语 法 方面 的 书籍 。 


2.1 如 何 使 用 Dreamweaver 建 站 


Dreamweaver 是 由 Macromedia 公 司 开发 的 一 款 网 站 开发 工具 。 它 是 所 见 即 所 得 的 界面 ， 


在 一 个 界面 上 可 以 同时 看 到 代码 和 页 面 显示 效果 ， 并 且 有 代码 提示 功能 ， 使 用 Dreamweaver 


制作 网 页 ， 简 单 快捷 ， 能 够 很 好 地 提高 网 页 制作 的 效率 。 
2.1.1 定义 站 点 


本 节 将 使 用 管理 站 点 的 方式 ， 按 照 以 下 步骤 定义 站 点 。 
(1) 打开 Dreamweaver 软 件 ， 界 面 如 图 2.1 所 示 。 


人 | DIV+CSS 布 局 与 样式 之 网 站 设计 基础 


Ced+Shift+D 
取出 (O Ctrl+Ak+Shift+D 
上 传 (P) Cer+Shift+U 
存 回 作 Ctrl+Ak+Shift+U 
后 消 取 出 (U) 

显示 取出 者 (B)… 


i 建 在 站 点 定位 (D 

罚 HTML 报告 ()… 

罚 coldFusion 同步 站 点 范围 (D).… 

罚 PHP 检查 站 点 范围 的 链接 (W) Curl+F8 
罚 ASP VBScript 改变 站 点 范围 的 链接 (0)... 

罚 xsLT ( 整 页 ) 高 级 (A) 


图 2.2 “站 点 ”菜单 


(3) 在 下 拉 莱 单 中 选择 “管理 站 点 ”， 弹 出 “管理 站 点 ”对 话 框 ， 如 图 2.3 所 示 。 


图 2.3 “管理 站 点 ”对 话 框 
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(4) 单 击 “新 建 ”按钮 出 现 一 个 下 拉 莱 单 ， 选 择 “ 站 点 ”， 如 图 2.4 所 示 。 


图 2.4 在 下 拉 菜 单 中 选择 “站 点 ” 


(5) 单 击 “ 站 点 ”命令 后 ， 打 开 站 点 定义 对 话 框 ， 如 图 2.5 所 示 。 在 站 点 定义 对 话 框 
中 ， 有 两 个 标签 : “基本 ”和 “高 级 ”， 这 是 两 种 新 建站 点 的 方式 ， 软 件 默认 的 是 “基本 ” 
标签 。 这 两 个 标签 的 区 别 是 : “基本 ”标签 相当 于 一 个 向 导 ， 可 一 步 一 步 地 完成 配置 ，“ 高 
级 ”标签 是 在 左 侧 的 “本 地 信息 ”中 同时 把 所 有 的 配置 都 设置 好 ， 如 图 2.6 所 示 是 “高 级 ” 标 
签 


公 。 


| 要 加 | 


Me Mottore bs 中 的 站 点 是 文件 和 文件 夹 的 集合 ， 它 对 应 于 服务 器 上 的 Yeb 站 


‖ 您 打 莽 为 人 8 起 什么 名 字 ? 
区 


| 示例 : mySite 


您 的 站 点 的 TTP 地 址 QURL) 是 什么 人 
Mtpi/7 
示例 :http: /fwre. agost eon/mySite 


er 


ES) EE WN GR 


图 2.5 站 点 定义 对 话 框 


全、| DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


站 点 名 称 中 :未 命名 站 点 2 
本 地 根 文件 夹 下): D:\ 


默认 图 像 文件 夫 [I) 
链接 相对 于 : 加 文档 名 ) 
TP 地 址 00: Bet:77 
训 
和 国度 二 和 
区 分 大 小 写 的 链接 : 回 使 用 区 : 
组 存 : 贺 启 用 


目 站 点 根 目录 G) 


分 大 小 写 的 插 接 检查 0 


CIC | 
图 2.6 “高 级 ”标签 


(6) 在 本 节 示 例 中 选择 “基本 ”标签 ， 如 图 2.7 所 示 ， 在 “基本 ”标签 下 面 ， 输 入 站 点 
名 称 和 站 点 的 地 址 ， 站 点 的 地 址 就 是 购买 的 域名 的 完整 地 址 ， 如 输入 http://www.baidu.com， 
其 中 “http” 和 “www” 都 不 能 省 略 。 


| CR 


图 2.7 输入 站 点 名 称 和 站 点 的 地 址 


(7) 单 击 “下 一 步 ”按钮 后 进入 对 话 框 的 新 页 面 ， 如 图 2.8 所 示 ， 在 这 个 页 面 中 询问 是 
和 否 使 用 服务 器 技术 ， 如 果 网 站 中 可 能 用 到 服务 器 技术 ， 可 以 在 下 拉 菜 单 中 选择 一 种 后 端 语 
言 ， 本 例 中 选择 “PHP MySQL”。 相 反 ， 可 以 先 选择 “无 ”， 以 后 再 配置 。 
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王 =9 匡 本 可 


图 2.8 选择 服务 器 技术 


(8) 单 击 “ 下 一 步 ” 按 钮 后 进入 对 话 框 的 新 页 面 ， 如 图 2.9 所 示 ， 在 这 个 页 面 中 询问 
如 何 使 用 文件 和 网 站 文件 的 存储 位 置 。 选 择 “ 在 本 地 进行 编辑 ， 然 后 上 传 到 远程 测试 服务 
器 ”， 并 填 好 网 站 文件 的 存储 位 置 。 


局. 在 二 地 计 行 久 如 和 二 (入 6i 服 共产 星 这 各 这 机 加) 
[加 在 本 地 过 行 编辑 ， 然 后 上 传 : 
人 


it 


图 2.9 填 好 网 站 文件 存储 位 置 


《9) 单 击 “ 下 一 步 ”按钮 后 进入 对 话 框 的 新 页 面 ， 如 图 2.10 所 示 ， 在 这 个 页 面 中 询问 如 
何 连 接 到 测试 服务 器 ， 并 且 在 下 拉 莱 单 中 有 5 个 选项 。 如 果 已 经 购买 了 网 站 虚拟 空间 ， 可 以 
选择 FTP; 如 果 还 没有 购买 空间 ， 可 以 选择 “我 将 在 以 后 完成 此 设置 ”; 如 果 想 本 机 作为 服 
务 器 ， 可 以 选择 “本 地 /网 络 ”， 表 示 新 建 的 站 点 在 本 机 。 本 例 中 选择 “我 将 在 以 后 完成 此 设 
置 ”。 


图 2.10 选择 “我 将 在 以 后 完成 此 设置 ” 


(10) 单 击 “ 下 一 步 ” 按 钮 后 进入 对 话 框 的 新 页 面 ， 如 图 2.11 所 示 ， 将 看 到 填写 完成 的 
站 点 信息 ， 检 查 是 否 有 错误 。 


基本 | 高 级 | 


图 2.11 检查 网 站 信息 


(11) 单 击 “完成 ”按钮 后 ， 回 到 如 图 2.12 所 示 的 “管理 站 点 ”对 话 框 ， 可 以 看 到 新 建 
的 站 点 名 称 “ 百 度 新 闻 ”， 单 击 “ 完 成 ”按钮 。 
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图 2.12 回 到 “管理 站 点 ”对 话 框 


新 建 好 的 站 点 可 以 在 Dreamweaver 界 面 右 侧 的 “文件 ”面板 下 看 到 ， 如 图 2.13 所 示 。 


新 建 
国 HTML 司 css 样 式 末 
蛋 coldFusion 


现在 升级 至 Dr envesver 
可 享受 20% 优惠 > 
具有 新 增 CSS3/YTHLS 和 jn 


图 2.13 “文件 ”面板 


2.1.2 制作 静态 网 页 
打开 Dreamweaver 软 件 ， 在 弹出 的 界面 中 新 建 一 个 HTML 文 件 ， 如 


图 2.14 所 示 。 


Assiiiusiastauuaiiag 3 


打开 最 近 的 项 目 从 释 讼 创建 

而 nmucoleoehtml a 入 

而 :sysWecss ae ColdFusion 

各 nmundechiml 加 PIP 《 主 本 ) 

而 Desktoprunmtied-1 html 条 AsP vBsrrit 醒 起 网 页 (基本 ) 

而 ppdimunmama html 而 xstT ( 草 页 ) 筷 到 - 

DD peoplelpeoplehtml 出 css 

局 打开- 由 Joserpt 扩展 
下 ol 图 Dreamweaver Exchange > 
请 Dreammweaner 站点， 
[-2.5 

RA 和 ANT» 天 reamweayer CS5.5» 

DD E> 可 守 受 20% 

局 Rp es 和 jQuery 移动 支 

PhoneGsp 工具 书 恒 


不 月 8 未 


图 2.14 新 建 一 个 HTMI 文 件 


新 建 HIML 后 ， 打 开 Dreamweaver 代 码 的 主 界面 ， 如 图 2.15 所 示 ， 在 这 个 界面 的 最 上 方 有 
3 个 标签 可 以 切换 ， 分 别 是 “代码 ”、“ 拆 分 ”、“ 设 计 ”。 单 击 “ 拆 分 ”标签 后 ， 可 以 同 
时 看 到 与 代码 相应 的 界面 展示 效果 。 


图 2.15 Dreamweaver 代 码 的 主 界面 


2.1.3 制作 动态 网 


制作 动态 网 页 时 ， 首 先 要 有 运行 的 环境 ， 才 能 在 本 地 电脑 里 调试 程序 、 预 览 网 页 ， 其 
次 ， 要 把 数据 库 和 Dreamweaver 连 接 好 ，Dreamweaver 才 能 够 建立 数据 焦 、 提 取 数 据 库 信息 。 
前 在 实际 项 目 中 ， 一 般 按 照 下 面 的 流程 制作 动态 网 页 : 


(1) 定义 站 点 。 
(2) 制作 静态 页 面 。 
(3) 将 数据 添加 到 静态 页 面 并 保存 为 -php 或 jsp 格 式 的 动态 网 页 
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(4) 进行 调试 。 
前 在 实际 项 目 中 ， 基 本 不 用 Dreamweaver 制 作 动态 网 页 ， 主 流 软 件 有 Zend Studio、Eclipse 
等 ， 前 者 主要 用 于 开发 PHP 语 言 编 写 的 网 页 ， 后 者 主要 用 于 开发 Java 语 言 编写 的 网 页 。 


2.1.4 浏览 网 页 
浏览 网 页 有 两 种 方法 : 


@ 在 Dreamweaver 中 ， 按 F12 键 即 可 预览 。 
e 找到 存储 网 页 的 根 目录 ， 在 浏览 器 中 进行 浏览 。 


2.2 策划 网 站 


网 站 策划 是 一 项 非常 专业 的 工作 ， 包 括 了 解 需求 、 确 定 网 站 主题 、 设 计 网 站 功能 、 规 划 
网 站 结构 等 。 网 站 策划 的 好 坏 直接 关系 到 将 来 网 站 能 否 成 功 。 


2.2.1 确定 网 站 主题 


刚 开始 做 网 站 的 时 候 要 先 确 定 网 站 的 主题 ， 如 果 没 有 主题 和 中 心 ， 往 往 网 站 的 结构 和 内 
容 混乱 ， 导 致 最 后 越 做 越 差 。 
可 以 按照 下 面 的 方法 尝试 确定 一 个 网 站 的 主题 : 


。 想 好 网 站 的 内 容 或 方向 ， 用 搜索 引擎 搜索 一 下 与 之 相关 的 网 站 有 多 少 ， 内 容 和 功能 
是 什么 ， 做 一 下 了 解 。 

e 进行 问卷 或 口头 调查 ， 了 解 对 互联 网 的 需求 。 

e 根据 自己 的 爱好 确定 网 站 主题 。 


2.2.2 网 站 需求 分 析 


对 网 站 进行 需求 分 析 时 主要 从 以 下 3 个 方面 考虑 : 


e 建站 的 目的 。 
e 确定 网 站 功能 、 规 模 、 投 入 费用 。 
e 确定 网 站 面向 的 对 象 。 


分 析 好 后 ， 编 写 一 份 网 站 需求 分 析 报 告 以 供 设计 网 站 时 参考 。 


2.2.3 网 站 框架 图 设计 /交互 设计 
网 站 交互 设计 的 目的 是 增加 网 站 的 可 用 性 和 易 用 性 ， 使 用 户 能 够 简单 、 快 速 地 获取 所 需 


人 DIV+CSSrmskxzmaaad Le 


的 服务 。 交 互 设计 必须 以 用 户 的 需求 为 导向 ， 并 且 要 考虑 到 技术 的 制约 因素 ， 最 后 搭建 网 站 
网 站 交互 设计 主要 包括 界面 设计 、 导 航 设计 和 信息 设计 。 
界面 设计 主要 是 网 页 界面 设计 和 网 站 功能 模块 设计 。 导 航 设 计 是 使 用 户 清晰 了 解 网 站 的 

结构 ， 能 方便 找到 去 网 站 某 个 页 面 的 入 口 。 信 息 设计 是 使 用 户 快速 了 解 自己 现在 正在 做 什么 

和 将 来 能 做 什么 。 


2.3 视觉 设计 


视觉 设计 包括 的 范围 很 广 ， 如 书籍 设计 、 标 志 设 计 、 广 告 设计 等 。 网 站 的 界面 设计 也 是 
其 中 一 种 。 

界面 设计 是 通过 使 用 合理 的 颜色 、 字 体 、 图 片 、 布 局 等 ， 对 网 站 的 界面 进行 美化 和 修 
饰 ， 同 时 使 用 户 快速 区 分 网 站 不 同 的 信息 和 功能 模块 。 网 站 的 界面 设计 不 仅 包含 电脑 屏幕 上 
网 页 的 设计 ， 还 包括 各 类 设备 上 网 页 的 设计 ， 例 如 ， 用 手机 浏览 网 页 的 用 户 越 来 越 多 ， 手 机 
界面 的 设计 也 逐渐 受到 重视 。 

优秀 的 界面 设计 不 仅 能 提升 企业 的 网 络 形象 ， 更 能 留 住 用 户 ， 提 高 网 站 访问 量 。 

根据 网 站 的 功能 和 面向 人 群 的 不 同 ， 网 站 设计 在 配色 、 布 局 、 字 体 等 方面 也 有 相应 不 同 
的 设计 方案 。 界 面 设计 常用 的 工具 包括 Photoshop、CorelDraw、Tllustrator 等 。 


2.4 页面 开 发 


本 节 将 详细 介绍 在 网 页 开发 中 运用 的 基本 知识 和 技巧 ， 包 括 切 图 方法 、CSS 盒 模型 、 定 
位 和 网 站 文件 规划 等 。 


2.4.1 如 何 切 图 并 保存 切片 


切 图 是 制作 网 页 时 必 不 可 少 的 一 个 环节 。 所 谓 切 图 ， 就 是 把 视觉 设计 师 提供 的 网 页 效果 
图 切 成 一 块 一 块 的 小 图 片 供 制作 时 使 用 ， 这 些小 图 片 也 叫 切 片 ， 一 般 切 图 软件 有 Photoshop、 
Fireworks 等 。 

切 图 的 原则 是 尽量 使 切片 最 简单 ， 大 小 最 小 ， 并 且 一 个 模块 能 在 高 度 和 宽度 上 自由 伸缩 。 


1. 切 图 技巧 
e 颜色 渐变 或 图 案 重复 的 图 片 只 须 切 其 中 任意 一 块 重复 的 区 域 。 
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”车 闫 色 不 是 渐变 ， 没 有 重复 图 案 或 不 是 纯色 的 图 片 将 其 整体 作为 一 个 切片 。 
@ 能 用 CSS 的 background-color 属 性 显示 的 尽量 不 用 图 片 。 
@ 切 的 时 候 将 网 页 效果 图 放大 ， 切 片 边缘 精确 到 一 个 像素 ， 否 则 达 不 到 网 页 与 效果 图 


的 一 致 。 
2. 切 图 的 步骤 


(1) 在 Photoshop 中 打开 网 页 效果 图 ， 一般 是 PSD 格 式 ， 对 于 简单 的 页 面 ，JPG 格 式 也 可 
以 ， 如 图 2.16 所 示 在 Photoshop 中 打开 了 一 张 网 页 效果 图 。 
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图 2.16 在 Photoshop 中 打开 了 一 张 网 页 效果 


(2) 选中 工具 栏 中 的 “切片 工具 ”， 如 图 2.17 所 示 ， 选 中 所 有 切片 后 再 进行 切片 的 设置 
和 保存 。 

(3) 单 击 “ 文 件 ”| “存储 为 Web 和 设备 所 用 格式 (D)” 命 令 ， 如 图 2.18 所 示 ， 弹 出 “ 存 
储 为 Web 和 设备 所 用 格式 ”对 话 框 ， 如 图 2.19 所 示 。 


详 卫 昌 ] 竺 络 (E) 图 你 () 图 层 (选择 ($) 讳 锁 (分 析 ( 


新 奸 N)- casN 
打 FO)-. calo 
济 临 (8B). Alt+Ct+O 
FA). Alt+Shift+Ctrl+O 
打开 为 特急 
号 打开 文件 
Device Central.. 

OO cutw 
关闭 全 第 Alt+Ctr+W 
A Bridge.. Shift+Ctrl+W 
存 仿 (S) Ctrl+S 
存 久 为 (V). Shift+Ctrl+S 
签 入 

次 复 (R) Fl2 


图 2.17 选中 工具 栏 中 的 “切片 工具 ” ”图 2.18 “文件 ”|“ 存 储 为 Web 和 设备 所 用 格式 (D)” 命 令 
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图 2.19 “存储 为 Web 和 设备 所 用 格式 ”对 话 框 


(4) 选中 需要 保存 的 切片 ， 单 击 “ 预 设 ” 下 的 文件 格式 下 拉 框 ， 如 图 2.20 所 示 。 
(5) 单 击 “ 预 设 ” 下 的 压缩 品质 下 拉 框 ， 如 图 2.21 所 示 ; 也 可 以 单 击 “ 预 设 ” 下 的 品质 
下 拉 框 进行 图 片 品质 微调 ， 如 图 2.22 所 示 。 


图 2.20 文件 格式 下 拉 框 图 2.21 压缩 品质 下 拉 框 图 2.22 品质 下 拉 框 


2.4.2 CSS 选 择 器 


CSS 规则 由 两 个 主要 的 部 分 构成 : 选择 器 ， 以 及 一 条 或 多 条 声明 。 使 用 方法 是 : 
selector{declarationl;declaration2; ... declarationN} 


其 中 ，selector 是 选择 器 ，declaration1，declaration2，…，declarationN 是 声明 。 声 明 中 包 
含 属性 和 值 ， 如 selector {property: value} 中 ，property 是 属性 ，value 是 属性 的 值 。 
在 实际 的 网 页 中 常常 这 样 写 : 


body{background-color:blue;} 
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这 条 CSS 样 式 定义 了 网 页 中 <body> 标 签 的 背景 颜色 是 蓝 色 。 
再 如 ， 


hl {color:red; font-size:14px;} 
hl 是 选择 器 ，color 和 font-size 是 属性 ，red 和 14px 是 值 ， 图 2.23 是 上 面 这 段 代码 的 结构 。 
属性 ” 值 属性 什 


|---1 bssal 


I hi {color:red; font-size:14px;} 


选择 器 声明 声明 
图 2.23 CSS 样 式 的 结构 


性 声明 要 使 用 花 括号 包 国 起 来 。 
CSS 主 要 有 以 下 5 种 选择 器 。 


1. 标签 选择 器 


网 页 中 所 有 的 标签 都 可 以 作为 选择 器 ， 以 标签 作为 选择 器 的 就 是 标签 选择 器 。 例 如 ， 
body、div 和 span 都 是 网 页 中 的 标签 选择 器 ， 它 们 将 分 别 控制 网 页 中 的 所 有 <body>、<div> 和 
<span>， 在 CSS 文 件 中 的 书写 格式 为 : body{}、div{}、span{}。 


2. 群 组 选择 器 


除了 对 单个 XHTML 标签 进行 样式 指定 外 ， 同 样 可 以 对 一 组 对 象 进行 相 同 的 样式 定义 。 
例如 在 “hl.h2,.h3,p,span{ffont-size:12px: font-family:arial;} ”中 ， 使 用 逗号 对 选择 器 进行 分 隔 ， 
使 得 页 面 中 所 有 的 hl1、h2、h3、p、span 都 将 具有 相同 的 样式 定义 。 


3. 包含 选择 器 


对 某 一 个 对 象 中 的 子 对 象 进 行 样式 指定 时 ， 用 到 了 包含 选择 器 ， 对 象 之 间 使 用 空格 作为 分 
隔 符 。 例 如 ，hl span{font-weight:bold;} 是 对 <h1> 标 签 中 的 所 有 <span> 标 签 的 样式 进行 定义 。 


4. id 选择 器 


id 选择 器 可 以 为 标 有 特定 id 的 XHTML 元 素 指定 特定 的 样式 。id 选择 器 以 “#” 来 定义 。 
例如 : 


#red {color:red;} 
#green {color:green;} 


上 面 的 两 个 id 选择 器 ， 第 一 个 可 以 定义 元 素 的 颜色 为 红色 ， 第 二 个 定义 元 素 的 颜色 为 绿色 。 
洛 在 一 个 XHTML 页面 中 ， 相 同 的 id 仅 能 出 现 一 次 。 
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5. 类 选择 器 


在 CSS 中 ， 类 选择 器 以 一 个 点 号 显示 ， 例 如 : .center {text-align:center}， 则 在 XHTML 
中 ， 所 有 拥有 center 类 的 XHTML 元 素 均 居 中 。 


2.4.3 CSS 盒 模型 


网 页 中 的 每 个 元 素 类 似 于 日 常生 活 中 的 一 个 个 的 长 方形 盒子 。 这 些 盒子 有 上 下 左右 边 
距 ， 以 及 上 下 左右 内 边 距 。 这 些 盒子 在 网 站 制作 中 叫做 盒 模型 。CSS 盒 模型 都 具备 的 属性 包 
括 : 内 容 (content) 、 填 充 (padding) 、 边 框 (border) 、 边 界 (margin) 。 如 图 2.24 所 示 是 
与 盒 模型 有 关 的 属性 。 


2.24 盒 模型 


在 Firefox 浏 览 器 中 按 F12 键 打开 firebug 看 到 的 盒 模型 如 图 2.25 所 示 。 


PE OO Ny 


金 可 型 尺 寸 其 淮 : content-box 
图 2.25 firebug 中 的 盒 模型 
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margin 不 会 影响 盒子 本 身 的 大 小 ， 但 是 它 会 影响 与 盒子 有 关 的 其 他 内 容 ， 因 此 margin 是 
盒 模型 的 一 个 重要 的 组 成 部 分 。 
盒子 本 身 的 大 小 是 这 样 计算 的 : 


盒子 宽度 =width + padding-left + padding-right + border-left + border-right 
盒子 高 度 =height + padding-top + padding-bottom + border-top + border-bottom 


通过 盒子 的 长 宽 边 距 来 控制 盒子 的 大 小 与 其 他 盒子 的 距离 。 通 过 定位 和 浮动 来 确定 盒子 
在 页 面 中 的 位 置 。 盒 子 的 长 宽 边 距 浮 动 与 定位 是 通过 CSS 样 式 来 控制 的 。 


2.4.4 CSS 定 位 


网 页 中 的 元 素 布 局 的 方式 主要 有 3 种 : 普通 流 、 浮 动 和 绝对 定位 。 
1. 普通 流 


在 默认 情况 下 ， 网 页 元 素 按照 XHTML 结 构 自 上 而 下 ， 从 左 向 右 一 行 一 行 地 布局 ， 称 为 
普通 流 ， 也 叫 CSS 默 认 文档 流 。 也 就 是 说 ， 普 通 流 中 的 元 素 位 置 由 元 素 在 XHTML 中 的 位 置 
决定 。 普 通 流 是 网 页 中 最 基本 的 布局 方式 ， 没 有 任何 定位 和 浮动 的 XHTML 元 素 都 处 于 普通 
流 中 。 如 图 2.26 所 示 是 一 个 网 页 去 掉 CSS 样 式 后 在 浏览 器 中 的 表现 及 相对 应 的 XHTML 代码 ， 
这 些 XHTML 元 素 所 在 的 布局 就 是 一 个 典型 的 普通 流 。 


cdiv ie"doc"y 
目 cdiv id="hd” clase="ef"> 


/div> 
日 <div class="into”> 


日 <div it"bd” clase="ef"y 


div class="tezt_top"><jdivy 
kv clase="tert_s5d")> 


图 2.26 普通 流 
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FF 


2. 浮动 


浮动 的 元 素 可 以 向 左 或 向 右 移动 ， 直 到 它 的 外 边缘 碰 到 包含 框 或 男 一 个 浮动 框 的 边框 为 
浮动 框 不 在 文档 的 普通 流 中 ， 普 通 流 中 的 元 素 布局 时 ， 会 忽略 浮动 框 的 存在 。 
代码 2-1 是 浮动 元 素 和 处 于 普通 流 中 元 素 的 HTML 和 和 CSS 样式 。 


代码 2-1 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 浮 动 元 素 和 处 于 普通 流 中 的 元 素 </title> 

06 <style> 

07 div{border:2px solid red;margin:10px;padding:10px;} 
08 .box2{float:left;border:2px solid blue;} 

09 </style> 

10 </head> 

11 <body> 

12 <div> 最 外 层 容器 doc 

13 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 
14 <div class="box2">box2 向 左 浮动 </div> 

LS <div class="box3">box3 处 于 普通 文档 流 中 </div> 
16 <div class="box4">box4 处 于 普通 文档 流 中 </div> 
17 <div class="box5">box5 处 于 普通 文档 流 中 </div> 
18 </div> 

19 </body> 

20 </html> 


在 实际 项 目 中 CSS 代 码 和 HTML 代 码 最 好 分 开 写 ， 这 里 为 了 省 略 一 些 步骤 写 在 了 一 起 。 


第 07~08 行 是 CSS 代 码 部 分 ， 其 中 第 07 行 设置 了 所 有 <div> 容 器 的 边框 为 红色 ,为 了 在 浏览 器 


吕 


便于 观察 效果 ， 设 置 了 外 边 距 和 内 边 距 。 第 08 行 设置 了 box2 元 素 向 左 浮动 ， 为 了 和 普通 流 


中 的 其 他 元 素 区 别 ， 设 置 了 边框 为 蓝 色 。 在 浏览 器 中 的 显示 效果 如 图 2.27 所 示 。 


最 外 层 容器 doc 
box1 处 于 普通 文档 流 中 


box2 向 左 浮动 的 


box4 处 于 普通 文档 流 中 


box5 处 于 普通 文档 流 中 


图 2.27 浮动 元 系 和 处 于 普通 流 中 元 系 的 关系 


box1、box3、box4 和 box5 处 于 文档 的 普通 流 中 ，box2 向 左 浮动 ， 从 图 中 可 以 看 出 ，box2 


已 经 脱离 了 普通 流 ， 对 于 box1、box3、box4 和 box5 这 些 处 于 普通 流 中 的 元 素来 说 ，box2 不 占 


用 普通 流 中 的 位 置 ，box1、box3、box4 和 box5 仍 然 从 上 而 下 依次 布局 。 


上 
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对 于 浮动 的 元 素 ， 虽 然 不 占据 普通 流 中 的 位 置 ， 但 是 对 于 在 HTML 文 档 中 位 于 


F 它 后 


HI 


的 


元 素 仍 有 影响 ， 如 图 2.27 所 示 ，box3 中 的 文字 位 置 发 生 了 变化 。 同 时 ， 虽 然 box2 位 于 最 外 层 
容器 doc 中 ， 但 是 doc 的 高 度 并 不 包括 box2 的 高 度 。 为 了 解决 诸如 此 类 的 问题 ， 在 必要 时 需要 


清除 浮动 以 保证 页 面 布局 。 清 除 浮动 的 方法 分 为 以 下 两 种 情况 。 
(1) 当 浮动 元 素 不 是 包含 它 的 最 外 层 容器 中 的 最 后 一 个 元 素 时 


解决 上 述 问 题 非常 简单 ， 在 HTML 结 构 中 ， 给 位 于 浮动 元 素 后 面 的 元 素 添加 


“clear:both; ” 即 可 ， 如 代码 2-2 所 示 。 
代码 2-2 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 浮 动 元 素 和 处 于 普通 流 中 的 元 素 </title> 
06 <style> 


07 div{border:2px solid red;margin:10px;padding:10px;} 


08 .box2{float:left;border:2px solid blue;} 

09 .box3{clear:both;} 

10 </style> 

11 </head> 

12 <body> 

13 <div> 最 外 层 容器 doc 

14 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 
15 <div class="box2">box2 向 左 浮动 </div> 

16 <div class="box3">box3 处 于 普通 文档 流 中 </div> 
hr <div class="box4">box4 处 于 普通 文档 流 中 </div> 
18 <div class="box5">box5 处 于 普通 文档 流 中 </div> 
19 </div> 

20 </body> 

21 </html> 


第 09 行 在 box3 容 器 中 增加 了 样式 “clear:both;”， 在 浏览 器 中 的 显示 效果 如 图 2.28 所 示 。 


景 外 民 容 蝶 doc 


boxi 处 于 昔 通 文 悄 流 中 


box2 向 左 浪 动 


box3 处 于 普通 文档 流 中 
box4 外 于 普通 文 煌 这 中 


boz5 处 于 昔 通 文 悄 流 中 


图 2.28 浮动 元 系 和 处 于 普通 流 中 元 系 的 关系 


(2) 当 浮动 元 素 是 包含 它 的 最 外 层 容器 中 的 最 后 一 个 元 素 时 
在 没有 清除 浮动 时 如 代码 2-3 所 示 。 
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代码 2-3 


01 


<!DOCTYPE HTML> 


<html> 
<head> 


<meta charset="utf-8"> 


<title> 浮 动 元 素 和 处 于 普通 流 中 的 元 素 </title> 


<style> 


div{border:2px solid red;margin:10px;padding:10px;} 
-box5{float:left;border:2px solid blue;} 


</style> 
</head> 
<body> 


<div> 最 外 层 容器 doc 


<div 
<div 
<div 
<div 
<div 
</div> 
</body> 
</html> 


class="boxl">box1 处 于 普通 文档 流 中 </div> 
class="box2">box2 处 于 普通 文档 流 中 </div> 
class="box3">box3 处 于 普通 文档 流 中 </div> 
class="box4">box4 处 于 普通 文档 流 中 </div> 
class="box5">box5 向 左 浮动 </div> 


第 07 行 设置 了 所 有 <div> 容 器 的 边框 为 红色 ， 外 边 距 和 内 边 距 都 是 10px。 第 08 行 设置 了 
box5 容 器 向 左 浮动 ， 边 框 为 蓝 色 。 在 浏览 器 中 的 显示 效果 如 图 2.29 所 示 。 


最 外 层 容器 doc 


2.29 浮动 元 票 和 处 于 普通 流 中 元 标的 关系 


在 这 种 情况 下 ， 清 除 浮动 的 方式 主要 有 以 下 3 种 。 

@ 浮动 元 素 的 后 面 加 空 div 标 签 clear:both 

在 浮动 元 素 的 后 面 添加 一 个 空 div， 利 用 在 这 个 空 div 上 增加 CSS 样 式 clear:both 来 清除 浮 
动 ， 让 父 元 素 能 自动 获取 到 高 度 ， 如 代码 2-4 所 示 。 


代码 2-4 


01 
02 
03 
04 


<!DOCTYPE HTML> 


<html> 
<head> 


<meta charset="utf-8"> 
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05 <title> 浮 动 元素 和 处 于 普通 流 中 的 元 素 </title> 

06 <style> 

07 div{border:2px solid red;margin:10px;padding:10px;} 
08 .box5{float:left;border:2px solid blue;} 

09 .clear{clear:both;margin:0;padding:0;border:0;} 

10 </style> 


11 </head> 

12 <body> 

13 <div> 最 外 层 容器 doc 

14 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 
15 <div class="box2">box2 处 于 普通 文档 流 中 </div> 
16 <div class="box3">box3 处 于 普通 文档 流 中 </div> 
T7 <div class="box4">box4 处 于 普通 文档 流 中 </div> 
18 <div class="box5">box5 向 左 浮动 </div> 

TS9 <div class="clear"></div> 

20 </div> 

21 </body> 

22 </html> 


第 09 行 增加 了 样式 “.clear{clear:both:margin:0;padding:0:border:0;}”， 其 中 clear:both 用 于 
清除 浮动 ，“margin:0;padding:0;border:0;” 用 于 将 应 用 .clear 样 式 的 容器 所 占 高 度 变 为 Opx。 
在 浏览 器 中 的 显示 效果 如 图 2.30 所 示 。 


最 外 层 容器 doc 
boxl 处 于 普通 文档 流 中 


box2 处 于 普通 文档 流 中 


box3 处 于 普通 文档 流 中 


box4 处 于 普通 文档 流 中 


box5 向 左 浮动 


2.30 浮动 元 村 和 处 于 普通 流 中 元 条 的 关系 


这 种 方法 简单 有 效 ， 缺 点 是 : 如 果 页 面 浮 动 布 局 多 ， 就 要 增加 很 多 空 div， 而 这 些 空 div 不 
但 没有 任何 语义 ， 而 且 增 加 了 XHTML 文 件 大 小 ， 因 此 在 页 面 的 浮动 元 素 较 多 时 不 推荐 使 用 。 

Q@ 父 级 div 定 义 overflow:hidden 

使 用 overflow:hidden 时 ， 浏 览 器 会 自动 检查 浮动 区 域 的 高 度 ， 从 而 使 父 容器 的 高 度 能 包 
含 子 容器 的 高 度 ， 如 代码 2-5 所 示 。 

代码 2-5 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
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05 <title> 浮 动 元 素 和 处 于 普通 流 中 的 元 素 </title> 
06 <style> 


07 .doc{border:2px solid red;margin:10px;padding:10px;overflow:hidden;} 


08 div{border:2px solid red;margin:10px;padding:10px; } 


09 .box5{float:left;border:2px solid blue;} 
10 </style> 


11 </head> 

12 <body> 

13 <div class="doc"> 最 外 层 容 器 doc 

14 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 
45 <div class="box2">box2 处 于 普通 文档 流 中 </div> 
16 <div class="box3">box3 处 于 普通 文档 流 中 </div> 
LE <div class="box4">box4 处 于 普通 文档 流 中 </div> 
18 <div class="box5">box5 向 左 浮动 </div> 

19 </div> 

20 </body> 

21 </html> 


第 07 行 中 为 最 外 层 容器 增加 了 样式 .doc， 在 .doc 中 设置 了 边框 颜色 为 红色 ， 以 及 外 边 距 


和 内 边 距 ， 最 后 增加 了 “overflow:hidden;: ”， 在 第 13 行 的 最 外 
式 .doc。 


层 容 器 的 HTML 中 应 用 了 样 


代码 2-5 在 浏览 器 中 显示 的 效果 和 图 2.30 一 样 。 缺 点 是 : 和 position 配 合 使 用 时 需要 注意 ， 


叫 


为 超出 的 尺寸 会 被 隐藏 ， 在 没有 使 用 position 时 可 以 使 用 。 
@ 父 级 div 定 义 伪 类 :after 和 zoom 


这 是 一 个 很 流行 的 清除 浮动 的 方法 ， 在 很 多 大 项 目 上 已 经 被 完全 采用 。 这 个 方法 来 源 于 


http:Wwww.positioniseverything.net/easyclearing.html 这 个 网 站 ， 通 过 伪 类 :after 和 zoom 来 实现 ， 


完全 兼容 于 当前 主流 浏览 器 ， 如 代码 2-6 所 示 。 
代码 2-6 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 浮 动 元 素 和 处 于 普通 流 中 的 元 素 </title> 
06 <style> 


07 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 


clear:both;height:0;} 
08 *.cf{zoom:1;} 


09 div{border:2px solid red;margin:1l0px;padding:10px; } 


10 .box5{float:left;border:2px solid blue;} 
11 </style> 


12 </head> 

13 <body> 

14 <div class="cf"> 最 外 层 容器 doc 

15 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 
16 <div class="box2">box2 处 于 普通 文档 流 中 </div> 
和 <div class="box3">box3 处 于 普通 文档 流 中 </div> 
18 <div class="box4">box4 处 于 普通 文档 流 中 </div> 
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19 <div class="box5">box5 向 左 浮动 </div> 
20 </div> 
21 </body> 
22 </html> 


第 07~08 行 是 定义 的 .cf 类 ， 在 第 14 行 的 最 外 层 容 器 的 HTML 中 应 用 了 .cf 类 。 代 码 2-6 在 浏 
览 器 中 显示 的 效果 和 图 2.30 一 样 。 缺 点 是 : 代码 多 ， 可 以 定义 公共 类 ， 以 减少 CSS 代 码 。 

3. 绝对 定位 

设置 为 绝对 定位 的 元 素 从 普通 流 中 完全 删除 ， 并 就 近 设置 了 定位 的 父 元 素 进 行 定位 。 绝 
对 定位 的 元 素 原 先 在 普通 流 中 所 占 的 空间 会 关闭 ， 就 好 像 该 元 素 原 来 不 存在 一 样 。 元 素 定 位 
后 转换 成 一 个 块 元 素 ， 而 不 论 原来 它 在 普通 流 中 是 内 联 元 素 还 是 块 元 素 。 通 过 对 元 素 设置 绝 
对 定位 ， 可 以 随意 安排 该 元 素 在 页 面 中 的 位 置 。 

代码 2-7 是 绝对 定位 的 元 素 和 处 于 普通 流 中 的 元 素 的 HTML 和 CSS 代 码 。 


代码 2-7 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 绝 对 定位 的 元 素 和 处 于 普通 流 中 元 素 </title> 

06 <style> 

07 .doc{position:relative;} 

08 div{border:2px solid red;margin:10px;padding:10px;} 

09 .box5{margin:0;border:2px solid 10 blue;background:blue; 
Color:#fff;position:absolute;top:0px;left:100px;} 

10 </style> 

11 </head> 

12 <body> 

13 <div class="doc"> 最 外 层 容 器 doc 

14 <div class="boxl">box1 处 于 普通 文档 流 中 </div> 

15 <div class="box2">box2 处 于 普通 文档 流 中 </div> 

16 <div class="box3">box3 处 于 普通 文档 流 中 </div> 

和 <div class="box4">box4 处 于 普通 文档 流 中 </div> 

18 <div class="box5">box5 相 对 doc 容 器 进行 绝对 定位 </div> 

19 </div> 

20 </body> 

21 </html> 


第 07 行 定义 了 doc 容 器 相对 定位 ， 第 09 行 分 别 定义 了 box5 的 外 边 距 、 边 框 、 背 景 颜色 、 
文字 颜色 、 相 对 定位 。 其 中 ， 为 了 在 浏览 器 中 便于 观察 效果 ， 将 box5 的 外 边 距 设置 为 0， 边 
框 和 背景 设置 为 蓝 色 ， 文 字 颜 色 设置 为 白色 。 通 过 “position:absolute;” 将 box5 定 义 为 绝对 定 
位 ， 通 过 “top:0px;left:100px;” 将 box5 的 上 边缘 与 doc 的 上 边缘 的 距离 设置 为 Opx， 将 box5 的 
左边 缘 与 doc 的 左边 缘 的 距离 设置 为 100px。 在 浏览 器 中 显示 的 效果 如 图 2.31 所 示 。 
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boxl 处 干 普通 文档 流 中 


| ax2 处 二 普通 文档 流 中 


| iox3 处 干 音 通 文档 流 中 


IE 


图 2.31 绝对 定位 的 元 系 和 处 于 普通 流 中 元 系 的 关系 


2.4.5 认识 div 层 


使 用 <div> 进 行 网 页 排版 ， 是 现在 流行 的 一 种 趋势 。 例 如 使 用 CSS 属 性 ， 可 以 轻易 设置 
<div> 位 置 ， 演 变 出 多 种 不 同 的 布局 方式 。 

<div> 标 记 是 一 个 区 块 容器 标记 ， 在 <div></div> 标 记 中 可 以 放置 其 他 的 一 些 HTML 元 
素 ， 例 如 段落 <p>、 标 题 <h1>、 表 格 <table>、 图 片 <img> 和 表单 等 。 然 后 使 用 CSS 相 关 属 性 将 
<div> 标 记 中 的 元 素 作为 一 个 独立 对 象 进行 修饰 ， 这 样 就 不 会 影响 其 他 HTML 元 素 ， 例 如 下 面 
的 代码 。 


代码 2-8 


01 <html> 

02 <head> 

03 <title>div 层 </title> 
04 <style type="text/css"> 
O05 <1== 

06 div{ 

07 font-size:18px; 

08 font-weight:bolder; 
09 font-family:“ 幼 圆 ”; 
10 color:#FF0000; 

下 下 background-color:#eeddcc; 
12 text-align:center; 

13 width:300px; 

14 height:100px; 


TS border:1lpx #992211 dotted; 
TS 

LR ==> 

18 </style> 

19 </head> 

20 <body> 

21 <center> 

22 <div> 

23 ”这 是 div 层 


24 </div> 
25 </center> 
26 </body> 
27 </html> 
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代码 2-8 通 过 CSS 对 div 块 的 控制 绘制 了 一 个 div 容 器 ， 容 器 中 放置 了 一 段 文 字 。 浏 览 效果 
如 图 2.32 示 ， 可 以 看 到 一 个 矩形 方块 的 div 层 ， 居 中 显示 ， 字 体 显 示 为 红色 ， 边 框 为 浅 红 色 ， 


Cla EN 重要 HTML+CSS DD- CX 


文件 (F] ” 奖 浇 (日 ”至 看 (V) ”站 要 夫 (A) 工具 (T) 大 和 (H) 


div) 


图 2.32 div 


2.4.6 div 和 span 的 区 别 


对 于 初学 者 而 言 ， 对 div 和 span 两 个 标记 常 


层 显示 


常 混淆 ， 因 为 大 部 分 的 div 层 都 可 以 使 用 span 


标记 代替 ， 并 且 其 运行 效果 完全 一 样 ， 例 如 上 一 节 中 的 例子 ， 就 可 以 使 用 span 标 记 代替 div 标 


记 ， 其 运行 效果 完全 一 致 。 可 以 这 样 说 ， 在 使 
标记 的 作用 基本 相同 。 


区 块 对 HTML 元 素 进行 包含 方面 ，div 和 span 


div 和 span 标 记 的 区 别 在 于 : div 是 一 个 块 级 元 素 ， 其 包含 的 元 素 会 自动 换行 ，span 标 记 是 
一 个 行内 标记 ， 其 前 后 都 不 会 发 生 换 行 。div 标 记 可 以 包含 span 标 记 元 素 ， 但 span 标 记 一 般 不 


包含 div 标 记 。 
下 面 通过 一 个 例子 来 说 明 div 和 span 的 区 别 。 
代码 2-9 


01 <html> 

02 <head> 

03 <title>div 与 span 的 区 别 </title> 
04 </head> 

05 <body> 

06 ”<p>div 自 动 分 行 : </p> 

07 ”<div><b> 宁 静 </b></div> 
08 ”<div><b> 致 远 </b></div> 
09 ”<div><b> 明 治 </b></div> 
10 <p>span 同 一 行 : </p> 

pi <span><b> 老 虎 </b></span> 
7 <span><b> 狮 子 </b></span> 
13 <span><b> 老 鼠 </b></span> 
14 </body> 

15 </html> 


pt 


浏览 效果 如 图 2.33 所 示 ， 可 以 看 到 div 层 所 包含 的 元 素 进行 自动 换行 ， 而 对 于 span 标 记 ，3 


个 HTML 元素 在 同一 行 显 示 。 
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图 2.33 div 和 span 的 比较 


污 在 网 页 设计 中 ， 对 于 较 大 的 块 可 以 使 用 div 完 成 ， 而 对 于 具有 独特 样式 的 单独 HTML 元 素 ， 可 以 
? 使 用 Span 标 记 完成 。 


2.4.7 网 站 文件 规划 


一 个 网 站 是 由 几 个 到 几 十 个 甚至 上 百 个 HTML 页 面 组 成 的 ， 每 个 HTML 需 要 引用 CSS 文 
件 、 图 片 及 JavaScript 文 件 。 在 制作 网 站 前 ， 要 先 规划 好 这 些 文件 存放 的 位 置 ， 便 于 后 期 维护 。 

一 般 一 个 网 站 的 文件 由 css、images、temp、js 这 几 个 文件 夹 及 若干 HTML 文 件 组 成 : css 
文件 夹 用 于 存放 网 站 的 CSS 文 件 ，images 文 件 夹 用 于 存放 网 站 的 永久 图 片 ， 永 久 图 片 是 指 一 
个 网 站 的 banner、 网 站 标志 等 不 经 常 更 换 的 图 片 ，temp 文 件 夹 用 于 存放 网 站 的 临时 图 片 ， 临 
时 图 片 和 永久 图 片 是 相对 的 ， 是 指 网 站 中 需要 运营 人 员 经 常 更 换 的 图 片 ， 包 括 专题 页 面 的 图 
片 、 产 品 优惠 图 片 等 ， 这 些 图 片 随 着 活动 的 结束 或 时 间 的 推移 ， 需 要 运营 人 员 每 隔 一 段 时 
间 就 更 新 一 次 ;js 文件 夹 存放 的 是 网 站 需要 引用 的 JavaScript 文 件 ， 用 于 实现 网 站 的 交互 和 动 


男 。 


在 每 个 新 站 点 制作 前 ， 都 需要 先 把 这 些 文件 夹 建立 好 ， 将 CSS、 图 片 、JavaScript 文 件 存 
放 到 相应 的 文件 夹 中 ， 以 便 制作 时 能 够 正确 引用 其 路 径 ， 如 图 2.34 所 示 是 网 站 的 相关 文件 和 
路 径 关系 。 
2 伟 改 昌明 a 大 小 
ess 2013/11/4 15:18 文件 夹 
Bimages 2013/11/4 15:17 文件 突 
js 2013/116 14:18 文件 实 
县 temp 2013/11/5 10:09 。 文件 夫 
@indexhtml 2013/11/4 15:13 ”HTML 文件 3KB 
products.html 2013/11/5 13:13 。 HTML 文 件 4KB 
s services.html 2013/11/5 13:14 HTML 文件 3KB 


图 2.34 网 站 的 相关 文件 和 路 径 关 系 


2.4.8 CSS 样 式 规划 
网 站 中 所 有 用 到 的 CSS 样 式 文件 都 存放 在 css 文 件 夹 中 。 一 般 网 站 的 CSS 样 式 文件 都 由 3 个 
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Dk 


分 组 成 ， 如 代码 2-10 所 示 为 一 个 CSS 文 件 。 
代码 2-10 


01 /*css reset*/ 
02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input,button, textarea,p,blockquote,th,td{margin:0; padding:0;} 


03 table{border-collapse:collapse; border-spacing:0;} 

04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 af{text-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:"'"';} 

11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 

13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 

15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

Le cElzoom:ls 

17 /* 全 局 公共 样式 */ 

18 #hd{ } 

19 a{fcolor:#049;outline-style:none;} 

20 a:hover{color:#f£00;} 

2 -Cf{Zoom:1y} 

22 .cf:after{content:'.';display:block;visibility:hidden;clear:both; 
height:0px;} 

23 /*moduleABC ABC 模 块 的 样式 */ 

24 #moduleABC h2{font-size:14px;font-weight:bold;} 

25 #moduleABC p{font-size:1l2px;line-height:1.5;} 


最 开始 是 CSS 重 置 代码 ， 即 /*css reset*/ 代 码 ， 这 部 分 代码 用 于 重 置 浏览 器 的 CSS 默 认 属 
性 。 因 为 浏览 器 的 品种 很 多 ， 每 个 浏览 器 的 默认 样式 也 是 不 同 的 ， 如 <button> 标 签 ， 在 IE 浏 
览 器 、Firefox 浏 览 器 以 及 Safari 浏 览 器 中 的 样式 都 是 不 同 的 ， 所 以 ， 通 过 重 置 button 标 签 的 
CSS 属 性 ， 然 后 再 将 它 统一 定义 ， 就 可 以 产生 相同 的 显示 效果 。 这 部 分 代码 将 在 第 3 章 中 详细 
介绍 。 

中 间 的 是 /*global css*/， 这 部 分 代码 用 于 定义 页 面 中 的 公用 样式 ， 一 般 在 一 个 网 站 中 ， 
所 有 页 面 的 头 部 和 页 脚 都 是 完全 相同 的 ， 内 容 部 分 的 标题 样式 也 有 可 能 是 相同 的 ， 这 些 都 可 
以 提取 出 来 作为 公共 样式 ， 在 相似 样式 的 不 同 模块 之 间 公用 。 

最 后 是 各 模块 自己 的 样式 ， 这 些 样 式 不 可 以 复 用 ， 每 个 都 是 独一无二 的 ， 即 /*module 
css*/， 放 在 CSS 文 件 的 最 后 。 
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2.5 页面 开发 标准 和 规范 


在 网 站 开发 过 程 中 ， 无 论 是 团队 开发 ， 还 是 个 人 建站 ， 若 有 一 份 页 面 开 发 文档 作为 规 

范 ， 对 开发 工作 都 是 很 有 益 的 。 页 面 开发 规范 能 够 在 开发 过 程 中 提高 团队 协作 效率 ， 便 于 后 
人 台 人 员 添加 功能 、 优 化 维护 、 输 出 高 质量 的 文档 。 
网 页 规范 主要 在 HIML 和 CSS 书 写 两 个 方面 对 页 面 制作 进行 阐述 ， 包 括 : 符合 Web 标 准 、 
语义 化 HTML、 结 构 表现 行为 分 离 、 兼 容 性 优良 等 。 代 码 要 求 简洁 明了 、 有 序 ， 尽 可 能 地 减 
小 服务 器 负载 ， 保 证 最 快 的 解析 速度 。 

通常 判断 代码 质量 优 劣 的 标准 如 下 : 


e 浏览 器 兼容 性 测试 。 

ee XHTML 代码 结构 是 否 清晰 。 

ee XHTML 代码 结构 是 否 复杂 。 

XHTML 代码 是 否 和 CSS 混 杂 在 一 起 。 

XHTML 代码 是 否 大 量 出 现 不 被 推荐 使 用 的 标签 。 
XHTML 和 CSS 代 码 是 否 书写 规范 。 


2.6 综合 练习 1 一 一 图 文 排版 效果 


一 个 宣传 页 ， 需 要 包括 文字 和 图 片 信息 。 本 实例 将 结合 习 的 盒子 模型 及 其 相关 
性 ， 创 建 一 个 旅游 宣传 页 ， 具 体 步骤 如 下 。 


1. 分 析 需 求 


整个 宣传 页 面 ， 需 要 一 个 DIV 层 包含 并 带 有 边框 ，DIV 层 包括 两 个 部 分 ， 上 部 空间 包含 
一 个 图 片 ， 下 面 显 示 文 本 信息 并 带 有 底 边 框 ; 下 部 空间 显示 两 张 图 片 。 实 例 完 成 后 ， 效 果 如 
图 2.35 所 示 。 


2. 构建 HTML 页 面 ， 使 用 DIV 搭建 框架 


<html> 
<head> 
<title> 图 文 排版 </title> 
</head> 
<body> 

<div class="big"> 


是 


<div class="up"> 
<img src="top.jpg" border="0" /> 
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<p>- 反 季 游 正 流行 众 信 旅 游 暑期 邀 你 到 南半球 过 冬 </p> 
<p> -西安 世 园 会 暨 旅游 推介 会 今日 在 沈阳 举行 ! </p> 
<p> -澳大利亚 旅游 局 中 国 区 首 代 邓 李 宝 茵 八 月 底 卸 任 </P> 
<p> -“ 彩 虹 部 落 ” 土 族 : 旅 游 经 济 支撑 下 的 文化 记忆 恢复 (组 图 ) </p> 
</div> 
<div class="down"> 
<img src="bottoml.jpg" border="0" />g&nbsp;é&nbsp;&nbsp; énbsp; 
<img src="bottom2.jpg" border="0" /> 
</div> 
</div> 
</body> 
</html> 


此 时 的 浏览 效果 如 图 2.36 所 示 ， 可 以 看 到 页 面 自 上 向 下 显示 图 片 、 段 落 信 息 和 图 片 。 


| i pe = 
ee exe “| 


- 肥 季 兰 正 信行 众 信永 泽 呈 期 名 你 到 南半球 这 乞 

再 安 世 加 关于 克 洲 推介 会 日 在 沈阳 举行 | 

“大利 焉 角 消 局 中 国 区 看 代 邓 季 宇 商 八 月 弃 却 任 
“尘土 六 区 涌 经 济 支 择 下 的 文化 记忆 拔 复 组 图 ) 


图 2.35 旅游 宣传 页 图 2.36 构建 HTML 文 档 


3. 添加 CSS 代 码 ， 修 饰 整体 DIV 
<style> 
tt 
padding:0px; 
margin:0px; 


body{ 
font-family:" 宋 体 "; 
font-size:12px; 


.big{ 
width:220px; 
border:#0033FF lpx solid; 
margin:1l0px 0 0 20px; 


</style> 


CSS 样 式 代 码 在 body 标 志 选 择 器 中 设置 了 字形 和 字体 大 小 ， 并 在 big 类 选择 器 中 ， 设 置 整 
个 层 的 带宽 、 边 框 样式 和 外 边 距 。 

浏览 效果 如 图 2.37 所 示 ， 可 以 看 到 页 面 图 片 信息 和 文本 都 在 一 个 和 矩 形 盒子 内 显示 ， 其 边 
框 颜 色 为 蓝 色 ， 大 小 为 1 像素 。 
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4. 添加 CSS 代 码 ， 修 饰 字体 和 图 片 


:up p{ 
margin:S5px; 
} 

-up img{ 
margin:S5px; 
text-align:center;} 

-down{ 
text-align:center; 
border-top:#FF0000 lpx dashed; 
} 

.down img{ 
margin-top:S5px; 
上 


上 面 的 代码 定义 了 段落 、 图 片 的 外 边 距 ， 例 如 margin-top:5px 语 名 设置 了 下 面 图 片 的 外 边 
距 为 5 像素 ， 两 个 图 片 距离 是 10 像 素 。 
浏览 效果 如 图 2.38 所 示 ， 可 以 看 到 字体 居中 显示 ， 下 面 带 有 一 个 红色 虚线 ， 宽 度 为 1 像素 。 
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2.37 设置 整体 DIV 样 式 图 2.38 设置 名 个 元 系 的 外 边 距 
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2.7 综合 练习 2 一 一 淘宝 导购 菜单 


网 上 购物 已 经 成 为 了 一 种 时 尚 ， 其 中 淘宝 网 是 网 上 购物 网 站 中 影响 比较 大 的 网 站 之 一 。 
淘宝 网 的 宣传 页 面 到 处 都 是 。 本 实例 将 结合 前 面 学 习 的 知识 ， 创 建 一 个 淘宝 网 宣传 导航 页 
的 具体 步骤 如 下 。 

1. 分 析 需 求 

根据 实际 效果 ， 需 要 创建 一 个 div 层 ， 包 含 三 个 部 分 : 左边 为 导航 栏 ， 中 间 为 图 片 显示 区 
域 ， 右 边 为 导航 栏 ， 然 后 使 用 CSS 颜 色 设置 导航 栏 的 字体 和 边框 。 实 例 完成 后 ， 具 体 效果 如 


辕 
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图 2.39 所 示 。 
2. 构建 HTML 页 面 ， 使 用 DIV 搭 建 框 架 


<html > 

<head> 
<title> 淘 宝 网 </title> 
</head> 

<body> 

<div class="wrap"> 


<div class="area"> 
<div > 
<div class="tab area"> 
<ul> 
<li class="current"><a href="#"> 男 T 恤 </a></1i> 
<1i ><a href="#"> 男 衬衫 </a></1i> 
<1i><a href="#"> 休 闲 裤 </a></1i> 
<1i><a href="#"> 牛 仔裤 </a></1i> 
<1i><a href="#"> 男 短裤 </a></1i> 
<1i><a href="#"> 西 裤 </a></1i> 
<1i><a href="#"> 皮 鞋 </a></1i> 
<1i><a href="#"> 休 闲 鞋 </a></1i> 
<1i ><a href="#"> 男 凉鞋 </a></1i> 
</ul> 
</div> 
<div class="tab areal" > 
<ul> 
<1i><a href="#"> 女 T 恤 </a></1i> 
<1i><a href="#"> 女 衬衫 </a></1i> 
<1i><a href="#"> 开 衫 </a></1i> 
<1i ><a href="#"> 女 裤 </a></1i> 
<1i><a href="#"> 女 包 </a></1i> 
<1i ><a href="#"> 男 包 </a></1i> 
<1i ><a href="#"> 皮 带 </a></1i> 
<1i><a href="#"> 登 山 鞋 </a></1i> 
<1i ><a href="#"> 户 外 装 </a></1i> 
</ul> 
</div> 
</div> 
<div class="img area"> 
<img src=nantxu.jpg/> 
</div> 
</div> 
</body> 
</html> 


浏览 效果 如 图 2.40 所 示 ， 三 部 分 内 容 分 别 自 上 而 下 显示 : 第 一 部 分 是 导航 菜单 栏 ， 第 二 
部 分 也 是 一 个 导航 菜单 栏 ， 第 三 部 分 是 一 个 图 片 信息 。 
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淘宝 网 - Wozilla Firefox 


图 2.39 淘宝 宣传 页 图 2.40 基本 HTML 显 示 


3. 添加 CSS 代 码 ， 修 饰 整体 样式 


<style type="text/css"> 
body, p, ul, li{margin:0; padding:0;} 
body{font:12px arial, 宋体 , sans-serif;} 


.wrap{width:318px;height:248px; background-color:#FFFFFF; 


float:left;border: lpx solid #F27B04;} 
.area{width:318px; float:left;} 
-tab area{width:53px; height:248px; 
border-right:lpx solid #F27B04;overflow:hidden; } 
.tab areal{width:53px; height:248px; 
border-left:lpx solid #F27B04;overflow:hidden; 
position:absolute; left:265px; top:lpx; } 
.img areal{ 

width:208px; 

height:248px; 

overflow:hidden; 

position:absolute; 

top:-2px; 

left:55px; 
} 
</style> 


在 上 面 的 CSS 样 式 代码 中 ， 设 置 了 body 页 面 字体 、 段 落 、 列 表 和 列表 选项 的 样式 。 需 要 
注意 的 是 类 选择 器 tab_area 定 义 了 左边 列表 选项 ， 即 左边 导航 菜单 ， 其 宽度 为 53 像 素 ， 高 度 
为 248 像 素 ， 边 框 色 为 黄色 。 类 选择 器 tab_areal 定 义 了 右边 列表 选项 ， 即 右边 导航 菜单 ， 其 
宽度 和 高 度 同 左 侧 菜单 相同 ， 但 此 次 使 用 position 定 义 了 这 个 div 层 显示 的 绝对 位 置 ， 语 句 为 


“position:absolute; left:26Spx: top:1px:”。 类 选择 器 img_area 定 义 了 j 


是 使 用 position 绝 对 定位 。 


h 间 


图 片 的 显示 样式 ， 也 


间 为 图 片 。 
4. 添加 CSS 代 码 ， 修 饰 列表 选项 


img{border:0;} 


浏览 效果 如 图 2.41 所 示 ， 可 以 看 到 网 页 中 显示 了 三 个 部 分 ， 左 右 两 侧 为 导航 菜单 栏 ，9 


U 
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li{list-style:none;} 

a{font-size:12px; text-decoration:none} 

a:link,a:visited {color:#999;} 

“tab area vl lir ,tab areal ul LE 
{width:53px;height:27px;text-align:center;line-height:26px; 
float:left;border-bottom:lpx solid #F27B04;} 

-tab area ul li a,.tab areal ul li a{color:#3d3d3d;} 

-tab area ul li.current,.tab areal ul li.current{ height:27px; 
background-color:#F27B04;} 

.tab area ul li.current a,.tab areal ul li.current a{color:#fff; 
font-size:]12px; font-weight:400; line-height:27px} 


上 面 的 CSS 样 式 代码 完成 了 对 字体 大 小 、 颜 色 、 是 否 带 有 下 划 线 等 属性 的 定义 。 
浏览 效果 如 图 2.42 所 示 ， 可 以 看 到 网 页 中 的 左右 两 个 导航 菜单 ， 相 对 于 上 面 的 图 形 、 字 
体 颜 色 发 生 了 变化 ， 大 小 也 发 生 了 变化 。 


图 2.41 设置 整体 布局 样式 图 2.42 修饰 列表 选项 


2.8 初学 者 常见 问题 


初学 者 在 网 站 制作 中 遇 到 的 问题 比较 多 ， 本 节 主要 介绍 几 个 常见 的 问题 ， 并 对 这 些 问题 
进行 详细 解答 。 


2.8.1 DIV+CSS 网 站 标准 设计 的 优势 


运用 DIV+CSS 技 术 进行 网 站 制作 之 所 以 流行 ， 必 然 有 其 独特 的 优势 ， 主 要 包括 以 下 几 点 ; 

e 大 大 缩减 页 面 代码 ， 相 比 Table 布 局 减少 了 网 页 中 的 垃圾 代码 ， 进 而 减少 网 页 文件 的 
大 小 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 

e 结构 清晰 ， 方 便 搜 索引 擎 搜索 ， 提 高 搜索 引擎 对 网 站 的 评价 ， 进 而 提高 网 站 排名 ， 
提高 浏览 量 。 
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@ 更 好 地 控制 页 面 布局 。 网 页 的 表现 和 内 容 相 分 离 ， 将 网 页 的 表现 部 分 ， 如 一 些 修饰 
的 样式 和 布局 的 代码 放 在 一 个 独立 的 样式 文件 中 ，HTML 和 CSS 代 码 的 重用 性 强 ， 缩 
短 了 网 页 开发 时 间 和 成 本 ， 不 论 对 于 网 页 的 内 容 还 是 样式 ， 都 有 利于 将 来 修改 。 在 
网 站 文件 中 ， 只 需要 简单 地 修改 几 个 CSS 文 件 就 可 以 重新 设计 整个 网 站 的 页 面 。 现 在 
YAHOO、MSN 等 国际 门户 网 站 ， 网 易 、 新 浪 等 国内 门户 网 站 ， 都 采用 了 DIV+CSS 的 
框架 模式 ， 更 加 印证 了 运用 DIV+CSS 技 术 制 作 网 站 的 优势 。 

e 符合 W3C 标 准 ， 支 持 浏览 器 的 向 后 兼容 。 越 来 越 多 的 浏览 器 开发 商 均 为 W3C 支 持 者 。 未 
来 不 符合 标准 的 浏览 器 会 加 速 淘汰 和 更 新 ， 这 也 意味 着 符合 W3C 标 准 的 网 站 的 生命 周期 
会 更 长 。 


2.8.2 如 何 考虑 网 站 推广 问题 


网 站 策划 与 网 站 建设 是 取得 良好 网 站 推广 效果 的 基础 ， 在 网 站 建成 发 布 之 前 ， 就 需要 对 
网 站 的 目标 用 户 、 服 务 、 功 能 、 信 息 等 进行 全 面 地 规划 和 准备 ， 并 且 要 为 网 站 的 推广 提供 基 
本 的 条 件 。 例 如 ， 为 了 在 搜索 引擎 中 获得 好 的 排名 ， 就 需要 在 网 站 设计 阶段 对 网 页 进行 搜索 
引擎 优化 ， 如 果 打 算 采 用 交换 链接 的 方式 对 网 站 进行 推广 ， 就 需要 在 设计 阶段 考虑 好 链接 网 
站 的 位 置 ， 如 果 决 定 利 用 邮件 列表 作为 顾客 关系 和 顾客 服务 的 工具 ， 就 需要 在 功能 上 满足 邮 
件 列表 营销 的 基础 条 件 。 


2.8.3 什么 是 Web 标 准 


Web 标 准 不 是 某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 网 页 主要 由 3 部 分 组 成 : 结构 
(Structure) 、 表 现 (Presentation) 和 行为 (Behavior) 。 对 应 的 标准 也 分 为 3 方面 :结构 
化 标准 语言 主要 包括 XHTML 和 XML， 表 现 标 准 语言 主要 包括 CSS， 行 为 标准 主要 包括 对 
象 模型 ， 如 W3C DOM、ECMAScript 等 。 这 些 标准 大 部 分 由 万 维 网 联盟 (W3C) 起草 和 发 
布 ， 也 有 一 些 是 其 他 标准 组 织 制订 的 标准 ， 例 如 ECMA (European Computer Manufacturers 
Association) 的 ECMAScript 标 准 。 

可 扩展 超 文本 标识 语言 ， 即 XHTML 和 XML。 目 前 遵循 的 是 W3C 于 2000 年 1 月 26 日 推荐 
的 XML 1.0。XML 虽 然 数据 转 换 能 力 强大 ， 完 全 可 以 替代 HIML， 但 面 对 成 二 上 万 已 有 的 站 
点 ， 直 接 采 用 XML 还 为 时 过 早 ， 因 此 ， 我 们 在 HIML 4.0 的 基础 上 ， 用 XML 的 规则 对 其 进行 
扩展 ， 得 到 了 XHTML。 简 单 地 说 ， 建 立 XHTML 的 目的 就 是 实现 HIML 向 XML 的 过 渡 。 

层 双 样式 表 ， 即 CSS。 目 前 推荐 遵循 的 是 万 维 网 联盟 于 1998 年 5 月 12 日 推荐 的 CSS 2。W3C 创 
建 CSS 标 准 的 目的 是 以 CSS 取 代 HIML 表 格式 布局 、 帧 和 其 他 表现 的 语言 。 纯 CSS 布 局 与 结构 式 
XHIML 相 结合 能 帮助 设计 师 分 离 外 观 与 结构 ， 使 站 点 的 访问 及 维护 更 加 容易 。 


2.8.4 如 何 理解 margin 的 加 倍 问题 


当 div 层 被 设置 为 hoat 时 ， 在 IE 下 设置 的 margin 会 加 倍 。 这 是 一 个 正 存在 的 bug。 其 解决 办 
法 是 : 在 这 个 div 里 面 加 上 “display:inline;”。 
例如 : 
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<#div id="imfloat"></#DIV> 


相应 的 CSS 为 : 


#iamfloat{ 
float:left; 
margin:S5px; 


display:inline; 


} 


2.8.5 margin:0 auto 表 示 什 么 含义 


margin:0 auto 用 了 


定义 元 素 向 上 补 白 0 像素 ， 左 右 为 自动 使 用 。 这 样 按照 浏览 器 的 解析 


习惯 是 可 以 让 页 面 居 
使 页 面 居中 的 时 候 ， 
果 失 效 。 


Ph 显示 的 ， 一 个 语句 会 位 于 body 标 记 中 。 在 使 用 margin:0 auto 语 句 
一 定 要 给 元 素 一 个 高 度 并 且 不 要 让 元 素 浮动 ， 即 不 要 加 float， 否 则 效 
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本 章 将 主要 介绍 左右 两 栏 固 定 宽度 的 网 页 布局 ， 这 种 布局 方式 是 
网 站 中 最 常用 的 布局 方式 之 一 。 许 多 中 小 型 网 站 都 采用 了 这 种 布局 ， 
大 型 网 站 由 于 内 容 多 、 结 构 复杂 ， 通 常 采 用 几 种 布局 相 结合 的 方式 ， 
左右 两 栏 固 定 宽度 的 布局 常 出 现在 许多 模块 中 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


e@ 页 面 布 局 的 分 析 : 了 解 左右 两 栏 固定 宽度 的 布局 ， 并 对 这 
种 布局 方式 进行 分 析 。 

e@ 页 面 布局 的 实现 : 介绍 了 3 种 实现 方法 ， 在 实际 项 目 中 根据 
情况 灵活 运用 。 

e@ 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

@ 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


3.1 页 面 布 局 的 分 析 


本 节 将 展示 左右 两 栏 固 定 宽度 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 这 种 布局 进行 分 析 。 
1. 示意 图 


左右 两 栏 固定 宽度 的 页 面 在 浏览 器 中 的 布局 如 图 3.1 所 示 。 


左 栏 右 栏 


到 3.1 左右 两 栏 固定 宽度 的 页 面 在 浏览 器 中 的 布局 示意 
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2. 布局 分 析 
在 左右 两 栏 固 定 宽度 的 布局 中 ， 页 面 总 宽度 、 左 栏 以 及 右 栏 宽度 固定 ， 不 会 随 电 脑 屏幕 


或 浏览 器 宽度 的 改变 而 改变 。 


如 图 3.1 所 示 ， 左 栏 通常 也 称 为 侧 栏 ， 主 要 显示 子 导航 或 网 站 某 些 模块 的 内 容 ， 右 栏 通常 


也 称 为 3 


要 内 容 ， 主 要 显示 网 页 的 重要 内 容 。 在 网 页 制作 中 ， 考 虑 到 人 眼 的 最 佳 视线 范围 ， 


并 且 为 了 有 效 利用 电脑 屏幕 的 宽度 ， 网 页 常常 在 屏幕 中 水 平 居中 显示 。 


左右 两 栏 固定 宽度 的 布局 在 网 页 制作 中 非常 常见 。 这 种 布局 的 实现 方法 有 多 种 ， 主 要 用 


3.2 页 面 布局 的 实现 


到 了 浮动 和 定位 的 知识 。 在 这 种 布局 方式 中 ， 左 右 两 栏 的 宽度 通常 使 用 像素 px 来 设置 。 
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两 栏 浮动 


两 栏 浮动 是 指 左右 两 栏 都 浮动 ， 并 分 别 设置 宽度 。 通 常情 况 下 ， 左 右 两 栏 可 以 都 向 左 浮 


动 


或 者 都 向 右 浮动 ， 或 者 一 栏 向 左 浮动 ， 另 一 栏 向 右 浮动 。 


编写 XHTML 代码 如 下 。 
代码 3-1 
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<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 左 右 两 栏 固定 宽度 </title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="doc" class="cf"> 
<div class="side fl"> 左 栏 </div> 
<div class="main fr"> 右 栏 </div> 
</div> 
</body> 
</html> 


第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 网 页 的 头 部 元 素 。 第 02 行 和 第 14 行 是 
页 面 的 html 标 签 。 第 08 行 和 第 13 行 是 页 面 的 body 标 签 。 第 09 行 和 第 12 行 是 页 面 最 外 层 容 器 
#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 .side， 第 11 行 是 右 栏 .main。.side 和 .main 
容器 一 般 都 用 div 标 签 ， 因 为 div 标 签 在 没有 设置 宽度 时 将 默认 占 满 整个 父 容器 ， 搭 建 网 页 框 
架 时 使 用 div 标 签 ，div 标 签 的 英文 全 拼 是 division， 含 义 是 分 隔 、 区 块 。 
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根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 
代码 3-2 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 

clear:both;height:0;} 

O02 *.cflzoom:17} 

03 .fl{float:left;display:inline;} 

04 .fr{float:right;display:inline;} 

05 body{background:#ddd;} 

06 #doc{width:310px;font-family:" 微 软 雅 黑 "; font-size:18px; color:#fff;} 

07 .side{width:100px;background:red;height:100px; } 

08 .main{width:200px;background:green;height:100px;} 

第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮动 容器 的 高 度 变 化 时 ， 外 
层 容器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .fl 类 ， 通 过 float:left 设 置 了 向 左 浮 动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 
第 04 行 定义 的 二 类 ， 设 置 了 向 右 浮动 。 第 05 行 是 页 面 中 body 标 签 的 样式 ， 设置 了 背景 颜色 ， 
body 标 签 的 宽度 和 高 度 也 等 于 浏览 器 显示 区 域 的 宽度 和 高 度 。 

第 06 行 是 网 页 最 外 层 容器 #doc 的 样式 ， 设 置 了 宽度 为 310px， 字 体 是 微软 雅 黑 ， 文 字 大 
小 是 18px， 文 字 颜色 是 白色 。 第 07 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 背 景 颜色 
是 红色 ， 高 度 是 100px。 第 08 行 是 右 栏 容 器 .main 的 样式 ， 设 置 了 宽度 为 200px， 背 景 颜 色 是 和 
色 ， 高 度 是 100px。 

通过 CSS 样 式 中 对 #doc、.side 和 .main 的 宽度 设置 可 以 看 出 ，.side 的 width 和 .main 的 width 
总 和 应 该 是 小 于 或 等 于 fdoc 的 width， 否 则 ， 页 面 的 正常 布局 将 被 打 乱 ，.main 容 器 将 因为 受到 
总 宽度 的 限制 而 被 挤 到 .side 的 下 一 行 。 

这 种 方法 的 优势 是 :不 需要 设置 容器 -side 和 .main 的 高 度 ， 当 容器 中 的 内 容 变化 时 ， 容 器 
的 高 度 会 随 着 变化 ， 延 展 性 比较 好 。 一 般 在 实际 的 网 页 制作 中 ， 由 于 网 页 内 容 会 随 运营 或 7 
品 的 需求 而 变化 ， 因 此 经 常 使 用 这 种 方法 。 本 例 中 由 于 容器 中 的 内 容 少 ， 为 了 清晰 地 显示 页 

结构 ， 将 .side 和 .main 容 器 的 高 度 都 设置 为 100px。 

在 浏览 器 中 的 显示 效果 如 图 3.2 所 示 。 


#doc 


图 3.2 在 浏览 器 中 的 显示 效果 


3.2.2 两 栏 绝 对 定位 


两 栏 绝对 定位 是 指 页 面 最 外 层 容 器 或 某 个 模块 的 最 外 层 容器 设置 成 相对 定位 ， 并 设置 总 
宽度 ， 左 右 两 栏 都 设置 成 绝对 定位 ， 并 分 别 设置 宽度 。 
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编写 XHTML 代 码 如 下 。 

代码 3-3 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 右 两 栏 固定 宽度 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div class="side poa"> 左 栏 </div> 
hE <div class="main poa"> 右 栏 </div> 
12 </div> 

13 </body> 

14 </html> 


代码 3-3 的 XHTML 结 构 与 代码 3-1 中 的 相同 ， 区 别 是 在 #doc 容 器 上 删 掉 了 样式 .cf， 在 .side 
容器 上 将 样式 8 替换 成 了 poa， 在 .main 容 器 上 将 样式 .人 替换 成 了 .poa。 
根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 


代码 3-4 
01 body{background:#ddd;} 
02 #doc{width:310px;height:100px;position:relative; 
font-family: "微软 雅 黑 "; font-size:1l8px; color:#fff;} 
03 .poa{position:absolute;} 
04 .side{width:100px;height:100%;background:red;top:0px;left:0px;} 
05 .main{width:200px;height:100%;background:green;top:0px;left:110px;} 


第 01 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 。 第 02 行 是 网 页 最 外 层 容器 #doc 的 样 
式 ， 设 置 了 宽度 为 310px， 高 度 是 100px， 相 对 定位 ， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 


字 颜 色 是 白色 。 第 03 行 定义 的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容 
器 都 会 相对 父 容器 进行 绝对 定位 。 第 04 行 是 左 栏 容 器 .side 的 样式 ， 设 置 了 宽度 为 100px， 高 度 
是 100px， 背 景 颜色 是 红色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容器 左边 缘 0px。 第 05 行 是 右 栏 
容器 .main 的 样式 ， 设 置 了 宽度 为 200px， 高 度 是 100%， 背 景 颜色 是 绿色 ， 距 离 父 容器 上 边缘 
0px， 距 离 父 容器 左边 缘 110px。 

容器 .side 和 .main 都 是 绝对 定位 ， 设 置 为 绝对 定位 的 容器 从 文档 流 完全 删除 ， 容 器 原先 在 
正常 文档 流 中 所 占 的 空间 会 关闭 ， 就 好 像 该 容器 原来 不 存在 一 样 。 父 容器 的 高 度 不 会 随 子 容 
器 高 度 的 变化 而 变化 ， 因 此 在 本 例 中 ，#doc 要 设置 高 度 ， 子 容器 .side 和 .main 的 高 度 设置 为 它 
们 父 容 器 高 度 的 100%， 这 样 ，#doc 就 会 包含 .side 和 .main 了 。 

在 浏览 器 中 的 显示 效果 与 图 3.2 相 同 。 


3.2.3 


一 栏 浮动 ， 另 一 栏 绝对 定位 


一 栏 浮动 ， 另 一 栏 绝 对 定位 是 指 页 面 最 外 层 容器 或 某 个 模块 的 最 外 层 容 器 设置 成 相对 定 
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位 ， 并 设置 总 宽度 ， 左 右 两 栏 中 ， 其 中 一 栏 设 置 成 绝对 定位 ， 并 设置 宽度 ， 另 一 栏 设置 成 浮 
动 ， 并 设置 宽度 。 这 种 方法 是 前 面 两 种 方法 的 组 合 。XHTML 代 码 和 CSS 代 码 基 本 相同 。 
编写 XHTML 代码 如 下 。 


代码 3-5 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
了 
12 
L3 
14 


<!1DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 左 右 两 栏 固定 宽度 </title> 

<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 


<div id="doc" class="cf"> 
<div class="side fl"> 左 栏 </div> 
<div class="main poa"> 右 栏 </div> 
</div> 
</body> 
</html> 


代码 3-5 的 XHTML 结 构 与 代码 3-1 中 的 相同 ， 区 别 是 在 .main 容 器 上 将 样式 .全 替换 成 


了 .poa。 
根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 
代码 3-6 
01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 


02 
03 
04 
05 
06 


07 
08 


样式 与 前 面 两 种 方法 基本 相似 。 注 意 第 06 行 容器 #doc 的 样式 中 的 position:relative 用 于 


clear:both;height:0;} 

ctltzoom ll 

.fl{float:left;display:inline;} 

.poa{position:absolute;} 

body{background:#ddd;} 
#doc{width:310px;height:100px;position:relative; 

font-family: "微软 雅 黑 "; font-size:18px;color:#fff;} 
.Side{width:100px;height:100%;background: red;} 
.main{width:200px;height:100%;background:green;top:0px;left:110px;} 


器 .main 在 其 父 容器 中 的 精确 定位 。 
在 浏览 器 中 的 显示 效果 与 图 3.2 相 同 。 


3.3 ”网 页 实例 


前 面 分 析 了 左右 两 栏 固定 宽度 的 网 页 布局 并 介绍 了 实现 方法 。 本 节 将 以 一 个 实际 的 页 面 
为 例 ， 详 细 介 绍 这 种 布局 的 页 面 制 作 方 法 。 
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效果 图 分 析 


如 图 


3.3 所 示 是 一 个 体育 专题 页 


车 


分 人 人 人 亚洲 职业 男 篮 挑战 者 


调子 9 月 14 昌 -9 月 19 日 


让 雄 果 | 新 闻 图 片 | 直 揪 | 视频 | 夸 队 | 积分 榜 | 技术 统计 | Tou# 页 


Te 小 人 本 区 BJEIoT-T4 有 隐 
T 有 ze 日 小 昌 棕 斯文 BEor-rtf 间 
1 有 小 昌 本 斯文 有 Ifrt 有 间 
Te 大 李斯 文 局 下 ior-rtf 间 
1 有 2 小 和 本 斯文 局 EI0TT 人 交 


“亚洲 职业 男 篮 挑战 赛 ”的 效果 


网 


A 小 志春 基 # 交 BEI07-T4 太 网 
179 小 旧 本 基文 下 tor-Tefp 间 
TPRs 中 小 昌 天 基文 BEI0T-Ttfp 间 


9 入 
可 播 六 


人 
TDN 全 硬 TO 在线 易 I 名 广 汪 了 务 和 sa 友 第 条 系 们 


Coprmght 人 2011 TOM CON Corpor 克 on A Rights Resermed 半生 万 析 折 所 有 
TOWiiX 昌 问 义 明 上 Ffp 活 ! 010.85181169 放 要 地 箱 baoGtomonine nc com 


| 


网 


如 


3.4 所 示 ， 网 页 分 为 头 部 、 主 体内 容 和 页 脚 3 个 部 分 。 


9 N41N 亚洲 各 - 轴 站 挑战 赛 


新 开放 宁 9 月 14 


3] 


丙 和 大 打 | 新 闻 图 片 | 直播 | 视频 分 榜 | 技术 统计 | To 页 
比赛 日 各 


129 小 上 罕 期 当 六 所 下 107-T4 可 交 
1 月 2 日 小 姐 夺 斯 当 又 局 E101-T4 阳 
71 朋 299 小 直 村 斯 尖 又 尼 107-74 罗 阳 
7 月 29 昌 小 志 窜 新浪 忆 开 107-74 交 阳 
7 月 299 小 直 窗 基 浊 女 忆 珀 107-T4 加 交 


3.3 体育 专题 页 面 “ 亚 洲 职业 男 篮 挑战 赛 ” 的 效果 


7 月 3 昌 小 级 赛 和 次 文 司 Eor-ra 人 阅 
7 用 9 昌 小 圾 夺 期 尖 义 局 JE07-74 四 组 pe 
7 月 29 昌 小 引用 斯 汉 又 尼 亚 107-74 风 间 


鲁 明 时 生活 
性 


村 看 时 (sa 区 
二 括 计 


RE bartomenine inc com 


图 3.4 网 页 分 为 头 部 、 主 体内 容 和 页 脚 3 个 部 分 


全 可行 信 多 
二 攻守 
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1. 头 部 
头 部 分 为 网 页 banner 和 导航 ， 如 图 3.5 所 示 。 


网 页 banner 首 淖 几 亚洲 职业 男 赣 挑战 赛 


汤 江 - 硕 宁 9 月 14 日 -6 月 19 日 


喜 程 让 有 果 | 新 闻 图 片 | 直 捕 | 视频 | 球 队 | 积分 榜 | 技术 统计 | To 首页 | uboop 


图 3.5 网 页 头 部 


网 页 banner 是 一 张 图 片 ， 带 有 链接 ， 这 个 链接 指向 网 站 的 首页 或 主题 页 面 。 导 航 是 一 系 
列 的 文字 链接 ， 这 些 链接 用 “|” 分 隔 。 
2. 主体 内 容 


主体 内 容 分 为 左右 两 栏 。 左 栏 包 含 2 个 模块 ， 分 别 是 比赛 日 程 和 比赛 新 闻 。 右 栏 是 比赛 
视频 ， 如 图 3.6 所 示 是 页 面 的 主体 内 容 。 


T 月 2 日 小 要 守 斯 六 局 10T-T4 卫 上 
T 月 2 日 小 要 半期 痢 广 尼 下 07-T4 村 
月 2 月 小 雪 守 斯 省 净 尼 下 107-T4 半 耻 
?月 z 旧 小 提亲 基 洗 广 尼 下 107-T4 轩 了 
1 月 2 日 小 如 斯 省 又 尼 下 101-74 妆 限 
1? 月 2 小 堆 斯 又 尼 下 107-74 雪 个 
1 月 se 日 小 明基 项 各 局 下 407-74 沁 了 


所 注 可 a 
= bd 


狂 明 斯 杯 焦 锌 站 4 9 基 村 您 芭 
“中 国 隐 生 今 忆 得 二 证 贡 二 有 尘 联 ~ © 守 & 呈 油 
1 中国 罗 站 人 局 过 首届 了 
刘 国 加 说 要 直上 断交 WN 届 于 联 


顶 朋 断 林 集 训 拓也 新 林 您 码 
和 


图 3.6 网 页 主体 内 容 


e 比赛 日 程 模块 包括 模块 标题 和 比赛 列表 ， 如 图 3.7 所 示 。 
e 比赛 新 闻 模 块 包括 模块 标题 、 图 片 和 新 闻 列 表 ， 如 图 3.8 所 示 。 


比赛 日 程 模块 标题 

7 月 26 日 小 引 村 斯 洛 文 尼 焉 107-74 伊 妆 灰 
7 月 28 日 小 组 赛 斯 洛 文 尼 下 107-74 伊 朗 自 
1 月 z8 日 小 组 赛 斯 少 文 尼 正 107-74 伊 朗 灰 


斯 党 107-74 伊 

[sxeEr Pa 白 
中 本 斯 治文 尼 亚 107-74 伊 度 灰 

7 月 26 日 小 组 蹇 斯洛文尼亚 107-74 伊 朗 自 


T 月 26 日 小 组 赛 斯 洛 文 尼 亚 107-74 伊 朗 灰 
7 月 26 日 小 组 赛 斯 洛 文 尼 亚 107-74 伊 朗 自 


图 3.7 比赛 日 程 模块 图 3.8 比赛 新 闻 模块 


e 比赛 视频 模块 包括 模块 标题 和 视频 列表 ， 如 图 3.9 所 示 。 
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3. 页 脚 


页 脚 包 括 底部 导航 、 版 权 、 联 系 电 话 和 邮箱 等 信息 ， 如 图 


3.3.2 切 图 
页 面 在 


第 3 章 左右 两 栏 固 


视频 区 


ED 


姚 明 斯 本 集锦 姑 昌 斯 本 集锦 
播放 号 播放 


如 明基 杆 集锦 毁 明 斯 丁 旬 锦 录 明 斯 杯 集 锦 
下 名 播放 播放 


饰 明 其 杯 集 视 We 枯 启 堪 明 其 守 集 说 
名 播放 : Sy 


图 3.9 比赛 视频 模块 


3.10 所 示 。 


TOM 集 团 TOM 在 线 易 秩 购 袍 广告 服务 私 隐 政 策 联系 我 们 
Copyright@ 2011 TOM.COM Corporation All Rights Reserved 雷 过 万 多 版 权 所 有 
TOMRS 文 明 办 网 文明 上 网 举报 电话 : 010-85181169 ”举报 邮箱 : jubao@tomonline-inc com 


图 3.10 页 脚 


Photoshop 中 的 切片 示意 图 如 图 3.11 所 示 。 


切割 网 页 图 片 : banner.jpg、bodybg.jpg、htmlbg.jpg、navbg.jpg、topmobbg.gif、 
sidetitle.png、bottom.gif、 dot.gif、 club_14.gif、 videobg.jpg。 


切割 网 页 临时 图 片 : 


: temp214 85.jpg 和 temp120_87.jpg。 


六 用 们 内 亚洲 职业 男 复 挑战 讲 


图 3.11 页 面 在 Photoshop 中 切片 
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切 图 时 注意 : 

e 对 于 有 文字 的 背景 图 ， 需 要 在 Photoshop 中 将 文字 部 分 先 隐 藏 掉 再 进行 切割 ， 例 如 图 
片 navbg.jpg、sidetitle png 和 videobg.jpg. 

e 对 于 有 重 登 区 域 的 切片 ， 则 在 保存 时 应 该 分 别 进行 ， 不 能 一 块 保存 ， 否 则 重 登 区 域 
将 作为 单独 一 张 图 片 保存 。 例 如 背景 图 片 bodybg.jpg 应 该 先 保存 ， 然 后 是 效果 图 中 的 
其 他 图 片 。 


切片 中 的 蓝 色 背景 、 白 色 文字 部 分 是 Photoshop 自 动 为 每 个 切片 保存 的 序号 。 在 切片 上 右 
击 ， 弹 出 如 图 3.12 所 示 的 菜单 。 


测 除 切片 
妨 罚 切片 迁 项 … 
提升 到 用 户 切片 
组合 切片 
划分 加 片 … 

村 为 顶层 


| = 
一 一 一 一 后 移 一 层 
佐 线 昂 覃 败 。 ”村 为 庶 屋 
ls 


RE 


图 3.12 在 切片 上 单 击 右键 


单 击 “ 编 辑 切 片 选项 ”命令 ， 打 开 “ 切 片 选 项 ”对 话 框 ， 如 图 3.13 所 示 。 
工 = 


名 称 (N): 2014-05-06_131400_17 
URLU): 
目标 (R): 
信息 文本 (M): 
锯 标 记 (A): 


图 3.13 “切片 选项 ”对 话 框 


图 中 的 “名 称 (N)” 就 是 Photoshop 以 时 间 和 序号 为 切片 命名 的 。 其 中 的 “17” 代 表 切 片 
的 序号 。“ 名 称 (N)” 可 以 修改 ， 但 是 不 会 影响 切片 序号 的 显示 。 


3.3.3 绘制 框架 图 
根据 前 面 对 网 页 效果 图 的 分 析 ， 绘 制 出 了 页 面 大 体 的 框架 图 ， 如 图 3.14 所 示 。 


52 


第 3 章 左右 两 栏 固定 宽度 的 布局 


3.14 页 面 框架 


网 页 的 头 部 、 主 体内 容 和 页 脚 在 整个 框架 图 中 从 上 而 下 按 顺 序 排列 ， 这 3 部 分 在 浏览 器 


应 页 面 效果 图 中 的 右 栏 。 


3.3.4 编写 XHTML 代 码 


中 也 是 从 上 到 下 按 顺序 显示 。 框 架 图 中 的 左 栏 对 应 页 面 效 果 图 中 的 左 栏 ， 框 架 图 中 的 右 栏 对 


前 面 分 析 了 网 页 效果 图 ， 并 绘制 出 了 页 面 大体 的 框架 图 ， 编 写 网 页 的 XHTML 代 码 如 


<link href="css/style.css" rel="stylesheet" type="text/css" /> 


<div class="banner"><a href="index.html"> 
<img src="images/banner.jpg" alt=""/></a> 


href="#"> 赛 程 赛 果 </a>1| 
href="#"> 新 闻 </a>| 
href="#"> 图 片 </a>| 
href="#"> 直 播 </a>| 
href="#"> 视 频 </a>1| 
href="#"> 球 队 </a>| 
href="#"> 积 分 榜 </a>1| 
href="#"> 技 术 统 计 </a>| 
href="#">TOM 首 页 </a>1 
href="#">uhoop</a> 


下 。 
代码 3-7 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 亚 洲 职业 男 篮 挑战 赛 </title> 
06 
07 </head> 
08 <body> 
09 <div id="doc"> 
10 <div id="hd"> 
hl 
he </div><div class="nav"> 
3 <a 
14 <a 
15 <a 
16 <a 
17 <a 
18 <a 
ES <a 
20 <a 
过 于 <a 
22 <a 
P| </div> 
24 </div> 
25 <div id="bd" class="cf"> 
26 <div class="side fl"> 
肥水 


<div class="mob match"> 
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28 
2 
30 
bb 


E24 


33 
34 
35 
36 
Bi 
38 
39 
40 


41 
42 


43 


44 


45 
46 
47 
48 
49 
50 
51 
52 
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54 
55 
56 
与 录 
58 
59 
60 
61 


<h3> 比 赛 日 程 </h3> 
<div class="inbg"> 
<ul> 
<li class="odd">7 月 28 日 小 组 赛 
<a href="#"> 斯 洛 文 尼 亚 107-74 伊 朗 </a> 
< 
<1i>7 月 28 日 小 组 赛 
<a href="#"> 斯 洛 文 尼 亚 107-74 伊 朗 </a> 
</1i> 
…</a></1i> 
</ul> 
</div> 
</div> 
<div class="mob news"> 
<h3> 比 赛 新 闻 </h3> 
<div class="inbg"> 
<div class="pic"><a href="#"> 
<img src="temp/temp214 85.jpg"/></a> 
</div> 
<ul class="newslist"> 


<1i><a href="#"> 中 国 男 篮 今 启 程 赴 战 斯 杯 


首战 易建联 能 否 出 场 成 疑 </a></1i> 
<1i><a href="#"> 中 国 男 篮 今 启 程 赴 战 斯 杯 
首战 易建联 能 否 出 场 成 疑 </a></1i> 
<1i><a href="#"> 中 国 男 篮 今 启 程 赴 战 斯 杯 
首战 易建联 能 否 出 场 成 疑 </a></1i> 
</ul> 
</div> 
</div> 
</div> 
<div class="main fl"> 
<h2> 视 频 </h2> 


<ul class="cf"> 
<1i><a href="#" target=" blank"> 
<ing src-"temp/temp120 87.jpg" alt~=" 姚 明 斯 杯 集锦 "/></a> 
<a href="#" target=" blank"> 姚 明 斯 杯 集锦 </a> 
<span><a href="#"target=" blank"> 
播放 </a></span></1i> 
<1i><a href="#" target=" blank"> 
<img src="temp/temp120_87.jpg”alt=" 姚 明 斯 杯 集锦 "/> 
</a><a href="#" target=" blank"> 姚 明 斯 杯 集锦 
</a><span><a href="#" target=" blank"> 
播放 </a></span></1i> 


</ul> 
</div> 
</div> 
区 
<div class="link"> 
<a target=" blank"” href="#">TOM 集 团 </a> 
<a target=" blank” href="#">TOM 在 线 </a> 
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62 <a target=" blank” href="#"> 易 趣 购物 </a> 

63 <a target=" blank” href="#"> 广 告 服务 </a> 

64 <a target=" blank”href="#"> 私 隐 政 策 </a> 

65 <a target="” blank” href="#"> 联 系 我 们 </a> 

66 </div> 

67 <p>Copyright gcopy; 2011 TOM.COM Corporation,All Rights Reserved 
雷霆 万 钧 版 权 所 有 </p> 

68 <p>TOM 网 站 文明 办 网 文明 上 网 举报 电话 : 010-85181169 举报 邮箱 : 


<a target=" blank" href="mailto:jubao@tomonline-inc.com"> 
jubao@tomonline-inc.com</a></p> 

69 </div> 

70 </div> 

71 </body> 

72 </html> 

第 01 行 是 网 页 的 <!IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必须 是 HTML 文 档 的 第 一 行 ， 位 
于 <html> 标签 之 前 。 第 02 行 和 第 72 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTMI 文 档 。 

第 03~07 行 是 HTML 文档 的 头 部 信息 。 其 中 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 
的 元 素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 第 04 行 用 <meta> 标 签 
定义 网 页 的 编码 方式 是 utf-8。 第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 引用 的 样式 文件 的 地 址 。 

第 08~71 行 是 网 页 主体 。 其 中 第 08 行 和 第 71 行 是 <body> 标 签 。<body> 标 签 用 于 定义 
HTML 文 档 的 主体 。 第 09 行 和 第 70 行 是 网 页 的 最 外 层 容器 ，id 命 名 为 doc。 第 10~24 行 是 网 页 
的 头 部 。 这 里 是 指 网 页 框架 图 中 的 头 部 ， 而 不 是 HTML 文 档 的 头 部 。 

第 10 行 和 第 24 行 是 网 页 头 部 的 最 外 层 容 器 ，id 命 名 为 hd。 第 11 行 是 网 页 的 banner， 由 
<div> 标 签 包含 <img> 标 签 组 成 ， 由 于 网 页 的 banner 上 有 指向 首页 的 链接 ， 因 此 在 <img> 标 签 的 
外 层 增加 <a> 标 签 ，<a> 标 签 的 href 属 性 中 是 首页 的 地 址 。 在 制作 网 页 的 过 程 中 ， 如 果 链 接地 
址 还 没有 确定 或 者 由 运营 同事 填写 ， 可 以 暂时 用 “#” 填 写 href 的 值 ， 表 示 空 地 址 。 

第 12~23 行 是 网 页 导航 。 其 中 第 12 行 和 第 23 行 是 导航 的 最 外 层 容器 ，class 命 名 为 nav。 
第 13~22 行 是 10 个 导航 链接 。 每 个 链接 由 <a> 标 签 包含 导航 文字 组 成 ， 每 个 <a> 标 签 后 面 都 有 
“|”， 用 于 将 导航 文字 链接 分 隔 开 。 注 意 第 22 行 的 最 后 一 个 链接 后 面 没有 “|”。 

第 25~57 行 是 网 页 主体 内 容 。 其 中 第 25 行 和 第 57 行 是 网 页 主体 内 容 的 最 外 层 容器 ，id 命 名 
为 bd，class 是 cf。 由 于 主体 内 容 中 的 左右 两 栏 分 别 向 左 浮动 和 向 右 浮动 ， 因 此 在 机 d 容 器 上 添 
加 cf 的 类 ， 以 使 才 d 包 含 其 中 的 内 容 。 

第 26~48 行 是 主体 内 容 中 的 左 栏 。 其 中 第 26 行 和 第 48 行 是 左 栏 的 最 外 层 容 器 ， 在 该 容器 
上 添加 side 和 fl 类 。 其 中 fl 类 是 网 页 通用 样式 ， 定 义 了 容器 向 左 浮动 。 

第 27~36 行 是 比赛 日 程 模 块 。 其 中 第 27 行 和 第 36 行 是 比赛 日 程 模 块 的 最 外 层 容 器 ， 在 该 
容器 上 添加 mob 和 match 类 。mob 类 是 比赛 日 程 和 比赛 新 闻 这 2 个 模块 的 公共 类 。 前 面 已 经 对 比 
赛 日 程 和 比赛 新 闻 模 块 进行 了 分 析 ， 这 2 个 模块 的 结构 和 样式 有 很 多 相似 的 部 分 ， 因 此 提取 
这 2 个 模块 的 公共 样式 ， 编 写成 一 个 公共 类 mob。 

第 28 行 是 比赛 日 程 模块 的 标题 ， 由 <h3> 标 签 包含 标题 文字 组 成 。 一 般 在 制作 网 页 时 ， 
<h1> 标 签 用 于 包含 网 站 标志 、 大 标题 等 。<h2>~<h6> 标 签 用 于 包含 模块 标题 ， 其 中 最 常用 的 
是 <h1>~<h4> 标 签 ，<h5> 和 <h6> 标 签 一 般 用 不 到 ， 除 非 网 页 的 结构 很 深 ， 内 容 非 常 多 。 

第 29~35 行 是 比赛 日 程 模块 中 的 主要 内 容 ， 其 中 第 29 行 和 第 35 行 是 主要 内 容 的 最 外 层 容 
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器 ， 在 这 个 容器 上 添加 inbg 类 ， 用 于 定义 模块 主要 内 容 的 背景 颜色 。 

第 30~34 行 是 比赛 日 程 中 的 比赛 列表 ， 由 <ul> 标 签 包含 8 个 <li> 标 签 组 成 ， 每 个 <1i> 标 签 就 
是 一 条 比赛 日 程 信息 。 由 于 效果 图 中 ， 第 1、3、5 行 的 日 程 信息 的 背景 颜色 是 灰色 ， 因 此 相 
应 的 ， 在 第 1 个 、 第 3 个 、 第 5 个 <1i> 标 签 上 添加 odd 的 类 ， 用 于 定义 <li> 标 签 的 背景 颜色 。 

第 37~47 行 是 比赛 新 闻 模 块 。 其 中 第 37 行 和 第 47 行 是 比赛 新 闻 模 块 的 最 外 层 容器 ， 在 
该 容器 上 添加 mob 和 news 类 。 第 38 行 是 比赛 新 闻 模 块 的 标题 ， 与 比赛 日 程 模块 的 标题 结构 
相同 。 第 39~46 行 是 比赛 新 闻 模 块 的 主要 内 容 。 其 中 第 39 行 和 第 46 行 是 主要 内 容 的 最 外 层 容 
器 ， 在 这 个 容器 上 添加 inbg 类 ， 用 于 定义 模块 主要 内 容 的 背景 颜色 。 

第 40 行 是 比赛 新 闻 中 的 图 片 。 利 用 类 名 是 pic 的 <div> 标 签 包含 <img> 标 签 组 成 ， 由 于 图 片 
上 有 链接 ， 因 此 在 <img> 标 签 外 面 增加 <a> 标 签 。 

第 41~45 行 是 比赛 新 闻 列表 ， 由 <ul> 标 签 包含 3 个 <li> 标 签 组 成 ， 每 个 <li> 标 签 就 是 一 条 比 
赛 新 闻 。 

第 49~56 行 是 视频 模块 。 其 中 第 49 行 和 第 56 行 是 视频 模块 的 最 外 层 容 器 。 第 50 行 是 视频 
模块 的 标题 ， 由 <h2> 标 签 包含 标题 文字 组 成 。 第 51~55 行 是 视频 列表 ， 由 <ul> 标 签 包 含 10 个 
<1i> 标 签 组 成 ， 每 个 <li> 标 签 就 是 一 个 视频 。 其 中 每 个 视频 中 包括 视频 图 片 、 视 频 标 题 和 播放 
按钮 ， 分 别 在 <li> 标 签 中 用 <img>、<a> 和 <span> 标 签 表 示 ， 由 于 视频 图 片 和 播放 按钮 都 有 链 
接 ， 指 向 视频 正文 页 ， 因 此 ， 在 <img> 外 面 增加 <a> 标 签 ， 在 <span> 中 利用 <a> 标 签 包 含 “ 播 
放 ”。 

第 58~69 行 是 页 脚 。 其 中 第 58 行 和 第 69 行 是 页 脚 的 最 外 层 容器 ，id 命 名 为 化。 第 59~66 行 是 
底部 导航 ， 由 class 是 link 的 <div> 标 签 包含 6 个 <a> 标 签 组 成 。 第 67 行 是 版 权 信息 ，<p> 标 签 包 
含 相关 文字 组 成 。 第 68 行 是 网 站 联系 电话 、 邮 箱 等 信息 ， 由 <p> 标 签 包含 相关 文字 组 成 。 


3.3.5 编写 CSS 代 码 


根据 对 网 页 效果 图 和 XHTML 代 码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 。 
代码 3-8 


01 /*css reset*/ 

02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 

03 table{border-collapse:collapse; border-spacing:0;} 

04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 a{text-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:'"';} 


11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 

13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 

15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 
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45 


46 
47 
48 
49 


CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 
重 置 样式 ， 第 17~26 行 是 公共 样式 ， 第 27~49 行 是 模块 样式 。 通 过 CSS 
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*.cf{zoom:1;} 
/*global css*/ 
a{color:#333;text-decoration:none;} 


a:hover{text-decoration:underline;} 


-fl{float:left;display:inline;} 


.fr{float:right;display:inline;} 
html{background:url(../images/htmlbg.jpg) repeat-x left top;} 
body{font-size:12px;color:#333;font-family:" 宋 体 ",，Arial, Verdana, 
Geneva, Helvetica,sans-serif;background:#F3F4F4 url(../images/bodybg.jpg) 
no-repeat center top;} 

#doc{width:960px;margin:0 auto;} 

#ft{border-top:lpx solid #808080; margin:10px auto 0;color:#000; 
padding:10px 0;text-align:center;font-family:Arial;line-height:20px;} 
#ft a{color:#000;} 

/*module css*/ 

.banner{height:123px; } 

.nav{background:url(../images/navbg.jpg) no-repeat;height:45px; 
line-height:40px;text-align:center;color:#fff;} 

.nav a{font-size:14px;font-weight:bold;text-decoration:none; 
color:#fff;margin:0 lO0px;} 

#bd{background:url(../images/topmobbg.gif) repeat-x left top #96999B; 
padding-bottom:10px;} 

#bd .side{ width:249px;margin:0 7px; } 

#bd .side h3{background:url(../images/sidetitle.png) no-repeat; 
height:38px;line-height:30px; 
color:#fff;font-size:14px;padding-left:10px;} 


#bd .side 
no-repeat 
#bd .side 
-match ul 
-match ul 


.mob{background:url(../images/bottom.gif 

left bottom;padding:0 0 4px 0;} 
.inbg{background:#F5F5F5;} 
li{height:26px;line-height:26px;padding-left:15px;} 
li.odd{background-color:#E7E4E3;} 


.news{margin-top:10px;} 

-pic{width:214px;height:85px; margin:0 auto;padding-top:10px;} 
.news ul{padding:5px 20px;} 

.news ul li{height:24px;line-height:24px;overflow:hidden; 
background:url(../images/dot.gif)no-repeat left 1l0px;padding-left:S5px;} 
.main{width:695px;background:#fff;} 

-main h2{background:url(../images/club 14.gif) repeat-x left top;height:43px; 
line-height:43px;overflow:hidden;color:#024068; font-size:14px;padding-left:20px;} 
.main ul{padding:20px 0 20px 3px;} 

.main ul li{background:url(../images/videobg.jpg) no-repeat left top;width:128px; 
height:190px;float:left;margin:0 Spx;display:inline;text-align:center;} 


.news 


-main 
-main 
-main 
-main 


1 
i 
ul 1i 
ul 1i 


img{margin:4px auto 36px;display:block;overflow:hidden;} 
span{display:block;padding:6px 0 0 0;} 

span a{color:#02264F;} 

a{color:#CF2906;} 


置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 
置 代码 ， 对 相关 元 素 
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的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 
提高 浏览 器 的 兼容 性 。 通 过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 在 不 同 的 模块 中 重复 应 
用 ， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 

第 01 行 是 CSS 代 码 注释 ， 通 过 添加 必要 的 注释 ， 为 以 后 维护 和 团队 合作 提供 便利 。 第 02 
行将 标签 <body>、<div> 等 的 内 外 边 距 设置 为 0， 解 决 了 不 同 浏览 器 中 这 些 标签 有 不 同 的 默认 
内 外 边 距 的 问题 。 

第 03 行 合并 表格 边框 ， 并 将 单元 格 的 边框 间距 设置 为 0。 第 04 行 隐藏 <ul> 和 <ol> 标 签 的 列 
表 符号 。 第 05 行 将 <fieldset> 和 <img> 标 签 的 默认 边框 设置 为 0。 第 06 行 设置 <textarea> 标 签 的 文 
本 区 尺寸 不 能 随意 调节 。 

第 07 行 设置 <input> 和 <textarea> 标 签 在 获得 焦点 时 边框 为 0。 第 08~09 行 设置 <a> 标 签 的 默 
认 样 式 ， 默 认 没 有 下 划 线 ， 鼠 标 移入 时 显示 下 划 线 。 

第 10 行 通过 对 <q> 标 签 的 设置 ， 去 掉 了 页 面 中 被 引用 内 容 的 引号 。 第 11 行 将 网 页 中 的 文 
字 缩 写 与 简称 设置 为 正常 字体 。 第 12 行 将 <address>、<cite> 等 标签 的 字体 都 设置 为 正常 字 
体 。 第 13 行 将 < legend> 标 签 中 的 文字 默认 设置 为 黑色 。 第 14 行 定义 了 一 个 名 称 是 clear 的 类 ， 
在 需要 清除 浮动 时 应 用 。 

第 15 行 定义 了 一 个 清除 浮动 的 类 cf， 在 需要 清除 浮动 时 应 用 。 第 16 行 通过 zoom:1， 触 发 
了 IE 6/7 浏 览 器 的 hasLayout， 解 决 了 类 cf 的 兼容 问题 。 

第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设置 了 颜色 、 下 划 线 是 否 显示 。 第 20~21 
行 分 别 定 义 了 2 个 通用 类 ， 即 和 位。 有 fi 是 向 左 浮动 ， 人 fr 是 向 右 浮动 ， 其 中 display:inline 用 于 解决 
在 IE 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <html> 标 签 设置 了 背景 图 片 ， 在 屏幕 上 水 平平 铺 。 由 于 用 户 的 电脑 屏幕 宽度 不 
一 样 ， 为 了 使 使 用 较 大 屏幕 的 用 户 在 浏览 网 页 时 ， 网 页 主体 内 容 的 左右 两 边 不 显示 空白 ， 在 
<html> 标 签 上 添加 了 一 张 水 平平 铺 的 背景 图 片 。 

第 23 行 为 <body> 标 签 设置 了 文字 大 小 、 颜 色 、 字 体 和 背景 图 片 。 网 页 的 制作 既 要 考虑 到 
屏幕 小 的 用 户 ， 也 要 考虑 到 大 尺寸 屏幕 的 用 户 ， 目 前 有 一 部 分 用 户 的 电脑 屏幕 尺寸 是 1024px 
宽 ， 如 果 HTML 文 档 中 插入 的 图 片 宽度 超过 这 个 尺寸 ， 就 会 造成 浏览 网 页 时 出 现 水 平 滚动 条 
的 问题 ,为 了 防止 出 现 水 平 滚动 条 ，HTML 中 的 较 大 图 片 ， 例 如 banner 的 宽度 限制 在 1024px 
内 ， 超 出 的 部 分 作为 背景 图 片 编写 在 CSS 样 式 中 。 

第 24 行 设置 了 网 页 最 外 层 容器 的 宽度 ， 并 通过 margin:0 auto 将 该 容器 在 浏览 器 中 水 平 居 

中 。 第 25 行 设置 了 页 脚 的 样式 ， 包 括 上 边框 、 内 外 边 距 、 文 字 颜色 、 文 字 水 平 居 中 、 字 体 以 
及 行 高 。 第 26 行 定义 了 页 脚 中 文字 链接 的 颜色 。 第 28~49 行 是 各 个 模块 的 样式 。 
第 28 行 定义 了 网 页 banner 的 高 度 。 第 29 行 设置 了 导航 的 背景 图 片 、 高 度 、 行 高 、 文 字 水 
平 居 中 和 文字 颜色 。 第 30 行 设置 了 导航 中 文字 链接 的 字体 大 小 、 文 字 加 粗 、 无 下 划 线 、 文 字 
颜色 和 左右 外 边 距 。 第 31 行 设置 了 页 面 主体 内 容 的 最 外 层 容 器 的 样式 ， 包 括 背 景 图 片 和 内 边 
距 。 第 32 行 设置 了 左 栏 最 外 层 容器 的 样式 ， 分 别 定义 了 宽度 和 左右 外 边 距 。 第 33 行 设置 了 左 
栏 中 所 有 <h3> 标 题 的 样式 ， 分 别 定义 了 背景 图 片 、 高 度 、 行 高 、 文 字 颜 色 、 文 字 大 小 以 及 内 
边 距 。 

第 34 行 设置 了 mob 类 的 样式 ， 分 别 设置 了 背景 图 片 与 所 在 容器 底部 对 齐 ， 并 与 底部 边 距 
为 4px。 左 栏 的 比赛 日 程 和 比赛 新 闻 模 块 都 应 用 了 该 样式 ， 呈 现 出 了 底部 圆 角 背景 的 效果 。 
第 35 行 设置 了 inbg 类 的 样式 ， 定 义 了 背景 颜色 ， 该 样式 将 应 用 到 左 栏 的 比赛 日 程 和 比赛 新 闻 
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模块 的 主要 内 容 上 。 

第 36 行 是 比赛 日 程 中 每 条 日 程 信息 的 样式 ， 分 别 定义 了 高 度 、 行 高 和 内 边 距 。 第 37 行 是 
比赛 日 程 中 奇数 行 的 样式 ， 定 义 了 背景 颜色 。 第 38~41 行 是 比赛 新 闻 模 块 的 样式 ， 其 中 第 39 
行 是 图 片 的 样式 ， 第 40~41 行 是 新 闻 列表 的 样式 。 第 41 行 通过 background 设 置 了 新 闻 列 表 中 每 
条 新 闻 前 面 的 圆 点 小 图 标 。 由 于 直接 在 HTML 中 输入 的 “.” 在 各 浏览 器 中 的 显示 效果 不 一 
样 ， 所 以 如 果 严 格 按照 效果 图 制作 网 页 的 话 ， 需 要 用 图 片 蔡 换 “.”。 

第 42~49 行 是 右 栏 的 样式 ， 其 中 第 43 行 是 右 栏 中 视频 模块 的 标题 样式 。 第 45~49 行 是 视频 
列表 的 样式 ， 其 中 第 45 行 通过 background 设 置 了 视频 列表 中 每 个 视频 的 背景 图 。 通 过 float:left 
将 每 个 视频 设置 为 向 左 浮动 ， 通 过 display:inline 解 决 了 IE 6 下 浮动 容器 的 左右 双 外 边 距 的 问 
题 。 


3.4 小 结 


本 章 主要 讲解 了 左右 两 栏 固 定 布局 的 网 页 制作 方法 ， 其 中 主要 介绍 了 3 种 方法 来 实现 这 
种 布局 ， 分 别 是 : 


日 两 栏 浮动 。 

® 两 栏 绝对 定位 。 

® 一 栏 浮动 ， 另 一 栏 绝对 定位 。 

读者 可 以 根据 需要 灵活 运用 ， 最 后 通过 一 个 简单 的 案例 ， 进 一 步 加 深 了 对 这 种 布局 方式 
的 掌握 。 
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本 章 将 主要 介绍 左右 两 栏 宽度 自 适 应 的 网 页 布局 ， 这 种 布局 方式 
下 的 网 页 宽度 可 以 随 用 户 屏 幕 尺寸 的 变化 而 自动 适应 。 目 前 这 种 布局 
方式 在 电脑 上 显示 的 网 站 中 不 常见 到 ， 但 是 随 着 手机 、iPad 等 电子 阅 
读 设备 的 发 展 ， 这 种 布局 方式 将 体现 出 其 自身 的 优势 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


e@ 页 面 布 局 的 分 析 : 了 解 左右 两 栏 宽度 自 适 应 的 布局 ， 并 对 
这 种 布局 方式 进行 分 析 。 

e 页 面 布局 的 实现 : 介绍 了 3 种 实现 方法 ， 可 在 实际 项 目 中 根 
据 情 况 灵 活 运 用 。 

e 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

日 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


4.1 页 面 布 局 的 分 析 


本 节 将 展示 左右 两 栏 宽度 自 适应 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 这 种 布局 进行 分 析 。 


4.1.1 示意 图 


左右 两 栏 宽度 自 适应 的 页 面 在 浏览 器 中 的 布局 如 图 4.1 所 示 。 


到 4.1 左右 两 栏 宽度 自 适应 的 页 面 在 浏览 器 中 的 布局 示意 
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4.1.2 布局 分 析 


在 左右 两 栏 宽度 自 适应 的 布局 中 ， 页 面 总 宽度 、 左 栏 以 及 右 栏 宽度 都 不 固定 ， 
屏幕 或 浏览 器 宽度 的 改变 而 改变 。 


如 图 4.1 所 示 ， 左 栏 通常 也 称 为 侧 栏 ， 主 要 显示 子 导 航 或 网 站 某 些 模块 的 内 容 ， 右 栏 通常 


会 随 电 


区 


也 称 为 主要 内 容 ， 用 于 显示 网 页 的 重要 内 容 。 这 种 布局 方式 可 以 适应 多 种 显示 设备 的 屏幕 宽 
度 。 如 果 用 户 的 显示 设备 是 大 屏幕 ， 则 页 面 内 容 就 随 屏 幕 宽度 向 左右 扩展 ， 反 之 ， 如 果 用 户 


的 显示 设备 是 小 屏幕 ， 则 页 面 内 容 会 向 中 心 收缩 ， 自 动 适 应 屏幕 的 宽度 。 随 着 电子 显示 器 的 


发 展 ， 这 种 布局 方式 将 会 越 来 越 受 到 人 们 的 青睐 。 


4:2 页 面 布局 的 实现 


左右 两 栏 宽度 自 适 应 的 布局 在 网 页 制作 中 不 是 很 常见 ， 这 种 布局 的 实现 方法 与 左右 两 


栏 固定 宽度 的 实现 方法 相似 ， 也 分 为 3 种 ， 主 要 用 到 了 浮动 和 定位 的 知识 。 这 种 布 


局 方式 的 


关键 是 网 页 总 宽度 和 左右 两 栏 的 宽度 都 使 用 百分比 “%” 来 设置 。 当 屏幕 或 浏览 器 宽度 改变 


时 ， 网 页 总 宽度 和 左右 两 栏 宽度 也 会 改变 ， 但 是 在 页 面 中 的 布局 不 会 乱 。 


4.2.1 两 栏 浮动 


两 栏 浮动 是 指 左右 两 栏 都 浮动 ， 并 分 别 设置 宽度 ， 宽 度 不 能 用 像素 ， 而 是 使 用 百分比 
“%” 来 设置 。 通 常 ， 左 右 两 栏 可 以 都 向 左 浮动 ， 或 者 都 向 右 浮动 ， 或 者 一 栏 向 左 浮动 ， 另 


一 栏 向 右 浮动 。 
编写 XHTML 代 码 如 下 。 
代码 4-1 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 右 两 栏 宽度 自 适应 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <div id="doc" class="cf"> 

10 <div class="side f1"> 左 栏 </div> 
11 <div class="main fr"> 右 栏 </div> 
12 </div> 

13 </body> 

14 </html> 
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第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 14 行 
是 页 面 的 html 标 签 。 第 08 行 和 第 13 行 是 页 面 的 body 标 签 。 第 09 行 和 第 12 行 是 页 面 最 外 层 容器 
#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 side， 第 11 行 是 右 栏 main。 

根据 页 面 的 XHTML 结构， 编写 CSS 代 码 如 下 。 

代码 4-2 

01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 

clear:both;height:0;} 

02 *.cf{zoom:1;} 

03 .fl{float:left;display:inline;} 

04 .frf{float:right;display:inline;} 

05 body{background:#ddd;} 

06 #doc{width:80%;font-family: "微软 雅 黑 "; font-size: L8pXE color: $f£EfE2} 

07 .side{width:30%;background:red;height:100px; } 

08 .main{width:70%;background:green;height:100px;} 


第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮动 容器 的 高 度 变化 时 ， 外 
层 容器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .fl 类 ， 通 过 float:left 设 置 了 向 左 浮动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 
第 04 行 定义 的 . 们 类， 设置 了 向 右 浮动 。 第 05 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 ， 
body 标 签 的 宽度 和 高 度 也 等 于 浏览 器 显示 区 域 的 宽度 和 高 度 。 第 06 行 是 网 页 最 外 层 容 器 #doc 
的 样式 ， 设 置 了 宽度 为 浏览 器 宽度 的 80%， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 字 颜 色 是 
白色。 第 07 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 最 外 层 容器 #doc 宽 度 的 30%， 背 景 颜色 
是 红色 ， 高 度 是 100px。 第 08 行 是 右 栏 容器 .main 的 样式 ， 设 置 了 宽度 为 最 外 层 容 器 #doc 宽 度 
的 70%， 背 景 颜色 是 绿色 ， 高 度 是 100px。 

通过 CSS 样 式 中 对 #doc、.side 和 .main 宽 度 的 设置 可 以 看 出 ，.side 的 width 和 .main 的 width 
的 总 和 应 该 是 小 于 或 等 于 100%， 否 则 ， 页 面 的 正常 布局 将 被 打 乱 ，.main 容 器 将 因为 受到 总 
宽度 的 限制 而 被 挤 到 .side 的 下 一 行 。 

在 浏览 器 中 的 显示 效果 如 图 4.2 所 示 。 


#doc 


| 屏幕 宽度 | 


图 4.2 在 浏览 器 中 的 显示 效果 


4.2.2 两 栏 绝对 定位 


两 栏 绝 对 定位 是 指 页 面 最 外 层 容器 或 某 个 模块 的 最 外 层 容器 设置 成 相对 定位 ， 并 设置 总 
宽度 。 左 右 两 栏 都 设置 成 绝对 定位 ， 并 分 别 设置 宽度 。 
编写 XHTML 代码 如 下 。 
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代码 4-3 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 右 两 栏 宽度 自 适应 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div class="side poa"> 左 栏 </div> 
下 <div class="main poa"> 右 栏 </div> 
12 </div> 

13 </body> 

14 </html> 


代码 4-3 中 的 XHTML 结 构 与 代码 4-1 中 的 相同 ， 区 别 是 在 #doc 容 器 上 删 掉 了 样式 .cf， 
在 .side 容 器 上 将 样式 8 替换 成 了 poa， 在 .main 容 器 上 将 样式 . 们 替换 成 了 .poa。 
根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 


代码 4-4 

01 body{background:#ddd;} 

02 #doc{width:80%;height:100px;position:relative; 

font-family: "微软 雅 黑 "; font-size:18px; color:#fff;} 

03 .poa{position:absolute;} 

04 .side{width:30%;height:100%;background:red;top:0px’;left:0px;} 

05 .main{width:70%;height:100%;background:green;top:0px;left:30%;} 

第 01 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 。 第 02 行 是 网 页 最 外 层 容器 #doc 的 样 
式 ， 设 置 了 宽度 为 80%， 高 度 是 100px， 相 对 定位 ， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 
字 颜 色 是 白色 。 第 03 行 定义 的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容 
器 都 会 相对 父 容器 进行 绝对 定位 。 第 04 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 30%， 高 度 
是 100px， 背 景 颜色 是 红色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容器 左边 缘 0px。 第 05 行 是 右 栏 
容器 .main 的 样式 ， 设 置 了 宽度 为 70%， 高 度 是 100%， 背 景 颜 色 是 绿色 ， 距 离 父 容器 上 边缘 
0px， 距 离 父 容器 左边 缘 30%。 

容器 .side 和 .main 都 是 绝对 定位 ， 设 置 为 绝对 定位 的 容器 从 文档 流 完全 删除 ， 容 器 原先 在 
正常 文档 流 中 所 占 的 空间 会 关闭 ， 就 好 像 该 容器 原来 不 存在 一 样 。 父 容器 的 高 度 不 会 随 子 容 
器 高 度 的 变化 而 变化 ， 因 此 在 本 例 中 ，#doc 要 设置 高 度 ， 子 容器 .side 和 .main 的 高 度 设置 为 它 
们 父 容 器 高 度 的 100%， 这 样 ，#doc 就 会 包含 .side 和 .main 了 。 

在 浏览 器 中 的 显示 效果 与 图 4.2 相 同 。 


4.2.3 一 栏 浮 动 ， 另 一 栏 绝 对 定位 


一 栏 浮动 ， 另 一 栏 绝 对 定位 是 指 页 面 最 外 层 容器 或 某 个 模块 的 最 外 层 容 器 设置 成 相对 定 
位 ， 并 设置 总 宽度 ， 左 右 两 栏 中 ， 其 中 一 栏 设 置 成 绝对 定位 ， 并 设置 宽度 ， 另 一 栏 设置 成 浮 
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动 ， 并 设置 宽度 。 这 种 方法 是 前 面 两 种 方法 的 组 合 。XHTML 代 码 和 CSS 代 码 基本 相同 。 
编写 XHTML 代 码 如 下 。 


代码 4-5 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 右 两 栏 宽度 自 适应 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc" class="cf"> 

10 <div class="side fl"> 左 栏 </div> 
i <div class="main poa"> 右 栏 </div> 
12 </div> 

13 </body> 

14 </html> 


代码 4-5 中 的 XHTML 结 构 与 代码 4-1 中 的 相同 ， 区 别 是 在 .main 容 器 上 将 样式 .全 替换 成 
了 .poa。 
根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 


代码 4-6 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

02. x .cElZo0m: 1?]) 

03 .fl{float:left;display:inline;} 

04 .poa{position:absolute;} 

05 body{background:#ddd;} 

06 #doc{width:80%;height:100px;position:relative;font-family: "微软 雅 黑 "; 
font-size:18px; Color:#fff;} 

07 .side{width:30%;height:100%;background:red;} 

08 .main{width:70%;height:100%;background:green;top:0px;left:30%;} 


样式 与 前 面 两 种 方法 基本 相似 。 注 意 第 06 行 容器 #doc 的 样式 中 的 position:relative 用 了 
器 .main 在 其 父 容器 中 的 精确 定位 。 
在 浏览 器 中 的 显示 效果 与 图 4.2 相 同 。 


只 


4.3 ”网 页 实例 


前 面 分 析 了 左右 两 栏 宽度 自 适 应 的 网 页 布局 并 介绍 了 实现 方法 ， 本 节 将 以 一 个 实际 的 页 
面 为 例 ， 详 细 介绍 这 种 布局 的 页 面 制作 方法 。 


4.3.1 效果 图 分 析 
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如 图 4.3 所 示 是 一 个 展示 摄影 作品 的 页 面 “ 自 然 物 语 ” 的 效果 图 。 
波斯 菊 


芭 
秋英 、 格 要 蓄 、 
张大 人 抢 。 秘 丝 
属 , 为 一 年 生 证 
志 术 物 ， 术 村 高 
应 aor~120cv 
外 立 , 力 村 
入 多 ， 光 汕 和 或 


内 R 边 红 肌 所 ,于 状 被] 抢 ， 共 罗 必 演 旦 贞 六 ， 蓄 区 
色 。 箭头 花 占据 花 重申 央 部 上 和 为 黄色 。 奈 果 有 栋 ， 种 子午 


下 约克 。 扩 页， 条 季 
于 


品种 可 作 切 枯 材 料 。 话 合作 六 入 消 好 
二 直 才 病 。 

大 矶 了 而 的 花 十 少妇 的 真心 
朗 、 永 远 快乐， 


刘 


如 


器 基 杏 ， 在 宣 地 过 缘 ， 梓 从 同 本 


六 大 ， 叶 有 六 各 ,有 村 
和 官 撤 ， 在 平地 迪 捧 ， 树 从 局 归 及 由 芝 世 片 加 


的 社 淋 ”、“ 具 中 美术 天 ”的 路 号 。 人 网 时 是 一 种 大 型 拌 ， 双 记 虹 开 训 有 
~3 匡 米 ， 件 租金 黄色 ， 有 光泽 。 用 有 殷 高 的 观 答 和 5 用 价值 。 它 分 布 EEX 
济 及 亚 测 的 全 北 区 ， 提 北美 浏 ， 关 各 慨 亿 及 友 列 ， 经 党 会 人 在 视 间 中 社 

们 出没 于 高 山 的 草原 及 山 边 ， 更 襄 欢 向 山顶 其。 在 民 地 ， 它 人 


包括 傣 雪 斯 至 中 国 及 日 本 ， 远 至 朵 拉 世 加 
巴基斯坦 及 克 什 半 尔 、 北 印 谋 、 尼姑 
内 及 类 各， 遇 开 至少 桂 拉 但、 隔 曼 及 名 站 UI 区 。 信 风电 证 
布 在 区 j 邮 区 ， 介 在 英国 则 只 甩 东 雪村 利 亚 的 疾 福 克昌 区 。 诺 广 克 齐 区 是 黄 
医 果 大 的 凯 如 天 室 、 

3 情 ， 清净、 高 洁 、 白 由 . 更 祁 内 各 ， 风 市 入 驳 隔 。 


4 样 ， 也 可 入 


提请 


图 4.3 “自然 物语 ”的 效果 


4.4 所 示 ， 网 页 分 为 头 部 和 主体 内 容 两 个 部 分 。 


于 二 怕 下山 坟 1 A 业 。 在 地 


片 关 入 关 化 生化 ， 业 有 季 奸 。 重 苦 


局 各 可 作 二 花村 和 ;接合 且 村 村， 乱 边 、 山 五 、 壮 坊 、 树 


广电 区 的 实 是 少女 的 各 心 、 
关 ， 示 二 乐 


头 部 包括 网 页 banner， 如 


少女 的 % 合 、 清 韶 、 高 洁 ， 自由、 丙 


图 4.4 网 页 分 为 头 部 和 主体 内 容 两 个 部 分 


图 4.5 所 示 。 


网 页 banner 是 一 张 背景 


图 4.5 网 页 头 部 


辐 片 ， 在 水 平方 向 ， 即 入 轴 方 向 水 平 铺 满 整 个 页 面 的 项 部 。 


主体 内 容 分 为 左右 两 栏 ， 


这 两 栏 用 于 展示 相关 的 摄影 作品 ， 结 构 和 样式 相同 ， 分 别 是 左 
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网 


栏 包含 标题 、 图 片 和 文字 说 明 ， 右 栏 包含 标题 、 图 片 和 文字 说 明 。 图 片 和 文字 说 明 在 形式 上 
采用 图 文 环绕 ， 并 且 图 片 位 于 文字 说 明 的 右边 ， 如 图 4.6 所 示 是 页 面 的 主体 内 容 。 


折 菊 


溅 断 有 又 名 
各 机 、 祝 和 花 、 
张大 人 花 。 和 苇 


关羽 花序 着 生 1 
b 络 路 后 舌 状 花 ] 轮 雇 疯 路 状 ， 其 猎 s 权 ， 有 白 、 检 、 未 红 
均 为 黄色 、 捷 果 有 桥 ， 种 了 寿命 Yd 年 ， 千 术 
会 风 样 外 在 整个 全 北 区 ， 己 括 作 罗 斯 至 中 国 及 日 本 ， 远 至 朵 拉 斯 加 
加 硬 大 及 美国 。 在 亚洲 ， 刻 们 分 布 在 巴 涯 斯 坦 及 现 印度 、 尼 泊 
疾 ， 榈 从 周围 及 路 亮 成 片 趟 秸 美 化 绿化 ， 颠 有 对 起 。 重 戎 四 及 尖 名 ， 最 南 至 沙特 j、 同 县 员 也 门 的 山区 。 金 凤 召 亦 广远 分 
昆 种 可 必 切 花 材 料 。 适 言 作 花 境 背景 材料 ， 也 可 桩 于 篇 边 ， 山 五 、 震 起 , 树 布 在 芍 ; 计 地 区 ， 但 在 英国 刚 只 限 东 安 格 利 亚 的 诺 根 克 关 区 。 诺 福 克 关 区 是 英 
坛 或 地震- 国 最 大 的 和 天 演 。 
大 迪 基 区 的 花语 是 少女 的 让 心 、 少女 的 此 情 ， 清 净 、 高 洁 、 让 由 , 更 社内 乱 淖 肉 ， 风 市 入 双 芍 ， 一 一 南朝 " 谢 驱 
詹 、 求 远 快乐。 


图 4.6 网 页 主体 内 容 


左 栏 包含 标题 、 图 片 和 文字 说 明 ， 图 片 位 于 文字 说 明 的 右边 ， 如 图 4.7 所 示 。 
右 栏 包含 标题 、 图 片 和 文字 说 明 ， 图 片 位 于 文字 说 明 的 右边 ， 如 图 4.8 所 示 。 


这 所 区 又 各 
各 让 ， 格 要 花 
张大 人 花 。 秋英 
属 ， 为 一 年 生理 
本 植物 ,朱林 高 
度 40~120cny 


绍 芝 直立 ， 


全 风 螺 又 名 
商 风 旦 、 萝 兰 凤 


村 


上 县 微 毛 。 单 叶 对 生 ， 长 的 IDcm 
志 杆 购 ，9 芝 直立 


色 。 简 杖 入 占据 入 人 各 
村 和 文字 说 明 
流光 析 形 高 大 ， 蓄 色 主语 ， 有 检 ， 白 、 沪 红 等 名， 适 于 有 
轩 社 入 ,在 草地 畔 ， 树 从 局 用 及 如 大 成 片 乓 村 美化 汉化 ， 闻 有 于 起 。 重 各 
品种 可 作 机 花村 笠 。 符 录 村 笠 ， 也 可 村 于 芝 边 、 山 五 、 兰 二 ， 鱼 
坛 或 宅 旁 。 
大 波斯 著 的 补 语 是 少女 的 喜 心 少女 的 志 情 、 清 净 、 高 洁 , 自由 , 夷 


术 家 ”的 绰号 。 金 凤 媒 是 一 种 大 型 蝉 。 台 如 展 开 宽 有 


耶 子 考 疝 3~ 和 年， 千 科 


国 最 大 的 机 天 过。 
花 人 下 于， 风 市 入 双 阁 。 一 一 向 由 * 询 晓 


部、 


图 4.7 左 栏 图 4.8 右 栏 


4.3.2 切 图 


页 面 在 Photoshop 中 的 切片 如 图 4.9 所 示 。 
切割 网 页 图 片 包括 banner.jpg、pic_01.jpg、pic_02.jpg。 其 中 ，banner.jpg 是 网 页 banner 的 
背景 图 片 ，pic_01.jpg 是 左 栏 中 的 图 片 ，pic_02.jpg 是 右 栏 中 的 图 片 。 
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闹 。 
大 而 的 其 扩 是 4 女 的 真心、 少女 的 纯情、 清光 高洁 、 自由 更 
骨 、 和 到 快 丰 ， 


人 


图 4.9 页 面 在 Photoshop 中 的 切片 


4.3.3 绘制 框架 图 
根据 前 


加 


对 网 页 效果 图 的 分 析 ， 绘 制 出 页 面 大 体 的 框架 图 ， 如 


庆 


4.10 所 示 。 


4.10 页 面 框架 


下 


网 页 的 头 部 和 主体 内 容 在 整个 框架 图 中 从 上 而 下 按 顺 序 排 列 ， 这 两 部 分 在 浏览 器 中 也 是 
从 上 到 下 按 顺序 显示 。 框 架 图 中 的 左 栏 对 应 页 面 效果 图 中 的 左 栏 ， 框 架 图 中 的 右 栏 对 应 页 
效果 图 中 的 右 栏 。 


二 


4.3.4 编写 XHTML 代 码 


前 面 分 析 了 网 页 效果 图 ， 并 在 第 4.3.3 节 中 画 出 了 页 
XHTML 代 码 如 下 。 


代码 4-7 


辕 


大 体 的 框架 图 ， 编 写 网 页 的 


01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 


04 <meta charset="utf-8"> 
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05 <title> 自 然 物语 </title> 


06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 


07 </head> 

08 <body> 

09 xdiv class="banner"></div> 
10 <xdiv id="bd" class="cf"> 


11 <div class="col fl"> 

1 <h2> 波 斯 菊 </h2> 

4 <img src="images/pic 01.jpg" alt="Image 1" 
class=" img right" /> 

14 <p> 波 斯 区 又 名 秋英 …… 花 期 夏 、 秋 季 。</p> 

15 <p> 波 斯 菊 株 形 高 大 …… 树 坛 或 宅 旁 。</p> 

16 <p> 大 波斯 菊 的 花语 是 少女 的 真心 、 少 女 的 纯情 …… 永 远 快 乐 。</P> 

Eh </div> 

18 <div class="col fr"> 

19 <h2> 金 凤 蝶 </h2> 

20 <img src="images/pic 02.jpg" alt="Image 2" class=" 
img right" /> 

21 <p> 金 凤 蝶 又 名 黄 凤 蝶 …… 它 们 也 会 在 花园 出 没 。</p> 

22 <p> 金 凤 蝶 分 布 在 整个 全 北 区 …… 诺 福 克 湖 区 是 英国 最 大 的 蝴蝶 天 堂 。</p> 

23 <p> 花 从 乱 数 蝶 ， 风 帘 入 双 燕 。 一 一 南朝 - 谢 上 晃 </p> 

24 </div> 

25 </div> 

26 </body> 

27 </html> 


第 01 行 是 网 页 的 <IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必 须 是 HTML 文档 的 第 一 行 ， 位 


于 <html> 标签 之 前 。 第 02 行 和 第 27 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自 


身 是 一 个 HTMIL 文档。 第 03~07 行 是 HTML 文档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。 


<head> 标 签 中 的 元 素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪 


找到 样式 表 、 提 供 元 信息 等 。 


第 04 行 用 <meta> 标 签 定义 网 页 的 编码 方式 是 utf-8。 第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 


引用 的 样式 文件 的 地 址 。 


酒 


第 08~26 行 是 网 页 主体 。 第 08 行 和 第 26 行 是 <body> 标 签 。<body> 标 签 用 于 定义 HTMIL 文 


档 的 主体 。 第 09 行 是 网 页 的 banner， 使 用 了 <div> 标 签 ， 


标签 上 的 类 名 是 banner。 


第 10~25 行 是 网 页 主体 内 容 。 第 10 行 和 第 25 行 是 网 页 主体 内 容 的 最 外 层 容器 ，id 命 名 为 
bd，class 是 cf。 由 于 主体 内 容 中 的 左右 两 栏 分 别 向 左 浮动 和 向 右 浮动 ， 因 此 在 #bd 容 器 上 添加 


cf 的 类 ， 以 使 #bd 包 含 其 中 的 内 容 。 
第 11 行 ~ 第 17 行 是 主体 内 容 中 的 左 栏 。 第 11 行 和 第 


17 行 是 左 栏 的 最 外 层 容 器 ， 在 该 容器 上 


添加 col 和 fl 类 。 其 中 fi 类 是 网 页 通用 样式 ， 定 义 了 容器 向 左 浮动 ，col 是 左右 两 栏 公 共 样 式 。 


样式 ， 并 重复 使 用 。 


由 于 左 栏 和 右 栏 的 HTML 结 构 和 在 效果 图 中 的 样子 是 一 样 的 ， 因 此 左 栏 和 右 栏 可 以 定义 一 个 


斑 不 能 用 id， 因 为 id 在 一 个 网 页 中 只 能 使 用 一 次 ， 第 2 个 或 第 2 个 以 后 使 用 该 id 的 容器 将 不 能 应 用 


3 下 这 个 id 中 定义 的 CSS 样 式 。 


第 12 行 是 左 栏 的 标题 ， 使 用 了 <h2> 标 签 ，<h2> 标 签 一 般 用 于 网 页 中 比较 重要 的 内 容 标 
题 ， 该 内 容 是 网 页 主要 向 用 户 表达 的 内 容 ， 在 重要 程度 上 仅 次 于 <h1> 标 题 表示 的 logo、 网 页 
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主题 等 内 容 。 
第 13 行 是 左 栏 中 的 图 片 ， 使 用 的 是 <img> 标 签 。 在 该 标签 上 的 src 是 图 


将 图 片 展示 到 网 页 中 。alt 是 图 片 的 标题 ， 当 图 片 由 于 删除 或 转移 不 能 正常 


片 的 地 址 ， 该 属性 
显示 时 ， 网 页 中 会 


显示 alt 中 的 文字 。class 是 图 片 样式 中 的 类 名 ， 这 里 是 img_right， 用 于 将 图 
义 与 文字 的 距离 等 样式 。 


片 向 右 浮动 ， 并 定 


第 14~16 行 是 左 栏 中 的 文字 。 每 段 文字 用 段落 标签 <p> 包 衷 。 第 18-24 行 是 主体 内 容 中 的 
右 栏 。 第 18 行 和 第 24 行 是 右 栏 的 最 外 层 容 器 。 第 19 行 是 右 栏 的 标题 。 第 20 行 是 右 栏 的 图 片 。 


第 21~23 行 是 右 栏 中 的 文字 。 


右 栏 中 的 标题 、 图 片 、 文 字 的 样式 和 结构 与 左 栏 完全 相同 ， 可 以 参考 左 栏 的 详细 讲解 。 


4.3.5 编写 CSS 代 码 


根据 对 网 页 效果 图 和 XHTML 代码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 。 
代码 4-8 


01 /*css reset*/ 


02 body,div,dl,dt,dd,ul,ol,1i,hil,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 


03 table{border-collapse:collapse; border-spacing:0;} 
04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 a{ftext-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:'';} 

11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 
13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 


15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 


clear:both;height:0;} 
LO *-.CEIZoOomlnl 
17 /*global css*/ 
18 a{color:#333;text-decoration:none;} 
19 a:hover{text-decoration:underline;} 
20 .fl{float:left;display:inline;} 
21 .fr{float:right;display:inline;} 
22 body{font-size:14px;color:#333; font-family:" 宋 体 "， Arial 
Geneva, Helvetica, sans-serif;} 
23 /*module css*/ 
24 #bd{width:90%;margin:0 auto;} 


: Verdanay 


25 .banner{background:url(../images/banner.jpg) repeat-x left top; 


height:50px;} 
26 .col{width:48%;} 
27 .col p{text-indent:2em;line-height:24px;} 


28 -img right{float:right;display:inline;margin:0 0 1l0px 1l5px;} 
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29 h2{font-size:28px;margin-bottom:10px;margin-top:20px; 
font-family: "微软 雅 黑 "; font-weight:normal;} 

CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 重 置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 
重 置 样式 ， 第 17~22 行 是 公共 样式 ， 第 23~29 行 是 模块 样式 。 通 过 CSS 重 置 代码 ， 对 相关 元 素 
的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 
提高 浏览 器 的 兼容 性 。 通 过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 在 不 同 的 模块 中 重复 应 
用 ， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 

第 01~16 行 的 详细 讲解 ， 请 参考 第 2 章 。 后 面 每 一 章 的 CSS 重 置 代码 都 是 一 样 的 ， 在 制作 
一 个 新 网 页 时 ， 可 以 先 把 这 部 分 CSS 样 式 复制 到 新 页 面 的 CSS 样 式 表 中 ， 再 开始 编写 新 页 奋 
的 公共 样式 和 各 个 模块 的 样式 。 

第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设置 了 颜色 、 下 划 线 是 否 显示 。 其 中 第 
18 行 中 的 text-decoration:none 表 示 页 面 中 的 所 有 链接 在 普通 状态 下 不 显示 下 划 线 ， 第 19 行 的 
text-decoration:underline 表 示 页 面 中 的 所 有 链接 在 鼠标 移入 时 显示 下 划 线 。 

第 20~21 行 分 别 定义 了 2 个 通用 类 : fl 和 位。fl 是 向 左 浮动 ， 丰 是 向 右 浮 动 ， 其 中 
display:inline 用 于 解决 IE 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <body> 标 签 设置 了 文字 大 小 是 14px， 文 字 颜 色 是 #333， 字 体 是 宋体 。 

和 壮 ”在 “font-family:" 宋 体 ", Arial, Verdana, Geneva, Helvetica, sans-serif” 中 ， 为 文字 设置 了 “宋体 ”、 

> Arial、Verdana 等 一 系列 的 字体 ， 当 用 户 电脑 系统 中 默认 字体 库 中 没有 第 一 个 字体 “宋体 ”时 ， 
则 显示 第 二 个 字体 “Arial”， 当 第 二 个 字体 也 没有 时 ， 则 显示 第 三 个 字体 ， 依 次 类 推 。 

第 24 行 是 主体 内 容 最 外 层 容 器 的 样式 ， 定 义 了 该 容器 的 宽度 是 90% 和 外 边 距 。 其 中 90% 
的 宽度 是 相对 于 父 容器 body 宽 度 的 90%， 而 body 的 宽度 与 浏览 器 的 宽度 相同 ， 所 以 ， 最 终 ， 
#bd 容 器 的 宽度 就 是 浏览 器 宽度 的 90%， 当 浏览 器 宽度 变化 时 ，#bd 容 器 的 宽度 也 随 之 变化 。 
在 不 同 的 显示 设备 上 ， 屏 幕 宽度 不 同 ，#bd 的 宽度 也 不 同 。 


澡 当 浏 览 器 在 显示 设备 中 100% 显 示 时 ， 浏 览 器 的 宽度 取决 于 屏幕 的 宽度 。 
第 24 行 设置 了 网 页 最 外 层 容器 的 宽度 ， 并 通过 margin:0 auto 将 该 容器 在 浏览 器 中 水 平 居 


中 


第 25 行 设置 了 banner 的 样式 ， 设 置 了 图 片 banner.jpg 在 页 面 中 水 平方 向 平 铺 ，banner 容 器 
的 高 度 是 50px。 

第 26 行 定义 了 类 col 的 样式 ， 设 置 了 宽度 是 48%。 这 个 宽度 也 是 相对 于 其 父 容器 宽度 的 
48%。 应 用 样式 col 的 容器 是 主体 内 容 中 的 左 栏 和 右 栏 ， 左 栏 和 右 栏 的 父 容器 都 是 id 是 bd 的 容 
器 ， 所 以 ，48% 的 宽度 就 是 #bd 容 器 宽度 的 48%。 

第 27 行 是 类 col 中 标签 p 的 样式 ， 定 义 了 <p> 中 文字 首 行 缩 进 2 个 汉字 ， 以 及 行 高 是 24px。 
text-indent:2em 表 示 缩 进 2em， 其 中 正 数 表示 向 右 缩 进 ， 负 数 表 示 向 左 缩 进 ，2em 正 好 是 2 个 汉 
字 的 宽度 ， 因 此 在 样式 表 中 ， 经 常 使 用 text-indent:2em 为 中 文 段落 设置 首 行 缩 进 的 样式 。 

第 28 行 是 类 img_right 的 样式 ， 定 义 了 向 右 浮动 以 及 外 边 距 。 其 中 display:inline 是 为 了 解决 
IE 6 下 浮动 容器 左右 双 外 边 距 的 问题 。 

第 29 行 定义 了 <h2> 标 签 的 样式 ， 即 主体 内 容 中 左 栏 和 右 栏 标题 的 样式 ， 分 别 定义 了 文字 大 
小 是 28px， 下 外 边 距 是 10px， 上 外 边 距 是 20px， 文 字 字 体 是 微软 雅 黑 ， 字 体 粗 细 设 置 为 默认 的 
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normal。<hl>~<h6> 标 签 的 默认 字体 设置 是 bold 粗 体 ， 当 不 需要 粗 体 设置 时 ， 用 fontrweightnormal 
设置 为 不 加 粗 ， 即 普通 文字 粗细 。 


4.4 小 结 


本 章 主要 讲解 了 左右 两 栏 宽度 自 适应 的 网 页 制作 方法 。 其 中 主要 介绍 了 3 种 方法 来 实现 
这 种 布局 ， 分 别 是 : 


日 两 栏 浮动 。 

e 两 栏 绝对 定位 。 

e “一 栏 浮动 ， 另 一 栏 绝对 定位 。 

3 种 方法 各 有 优 劣 ， 读 者 可 以 根据 实际 项 目 需要 灵活 使 用 。 

最 后 通过 一 个 简单 的 案例 ， 进 一 步 讲 解 了 如 何 对 这 类 页 面 进行 网 页 布局 ， 加 深 了 对 本 章 
介绍 方法 的 理解 和 掌握 。 


a 


一 = 一 栏 宽度 固定 ， 另 一 栏 
第 5 童 | 宽度 自 适 应 的 布局 


本 章 将 主要 介绍 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 的 网 页 布局 ， 
这 种 布局 方式 是 网 站 中 常见 的 布局 方式 。 
本 章 主要 涉及 到 的 知识 点 如 下 。 


® 页 面 布 局 的 分 析 : 了 解 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 
的 布局 ， 并 对 这 种 布局 方式 进行 分 析 。 

e 页 面 布局 的 实现 : 介绍 了 2 种 实现 方法 ， 可 在 实际 项 目 中 根 
据 情况 灵活 运用 。 

e 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

日 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


5.1 页 面 布 局 的 分 析 


本 节 将 展示 一 栏 宽 度 固 定 ， 另 一 栏 宽 度 自 适应 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 这 种 
布局 进行 分 析 。 


5.1.1 示意 图 


一 栏 宽度 固定 ， 另 一 栏 宽度 自 适 应 的 页 面 在 浏览 器 中 的 布局 如 图 5.1 所 示 。 


左 栏 右 栏 
网 页 宽度 
到 5.1 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 的 页 面 在 浏览 器 中 的 布局 示意 


Cr 第 5 章 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 的 布局 


5.1.2 布局 分 析 


在 


一 栏 宽度 固定 ， 另 一 栏 宽度 自 适 应 的 布局 中 ， 页 面 呈现 的 效果 就 是 其 中 一 


定 ， 另 一 栏 的 宽度 可 以 随 网 页 总 宽度 、 浏 览 器 或 者 屏幕 宽度 的 变化 而 变化 。 


在 
宽度 固 
度 的 改 
和 
通常 也 


固 
这 种 布局 方式 中 ， 页 面 总 宽度 可 以 固定 ， 也 可 以 不 固定 。 左 栏 和 右 栏 中 的 任意 一 栏 的 
万 宽 


栏 宽度 


定 ， 另 一 栏 的 宽度 不 固定 ， 会 随 电脑 屏幕 、 浏 览 器 宽度 、 页 面 总 宽度 或 另 一 固定 栏 
变 而 改变 。 
图 5.1 所 示 ， 左 栏 通常 也 称 为 侧 栏 ， 主 要 用 于 显示 子 导航 或 网 站 某 些 模块 的 内 容 ， 右 栏 


称 为 主要 内 容 ， 用 于 显示 网 页 的 重要 内 容 。 这 种 布局 方式 在 网 页 布局 中 更 灵活 ， 只 需 


要 修改 


其 中 一 栏 的 宽度 或 网 页 的 总 宽度 ， 另 一 栏 的 宽度 会 自动 适应 。 


5.2 页面 布局 的 实现 


一 栏 宽度 固定 ， 另 一 栏 宽 度 自 适应 的 布局 在 网 页 制作 中 很 常见 ， 这 种 布局 的 实现 方法 有 


2 种 ， 工 六 有 站 到 了 浮动 和 定位 的 知识 。 


5.2.1 


在 左右 两 栏 中 ， 其 


有 浮动 
编 


一 栏 浮动 ， 另 一 栏 默认 文档 流 并 设置 向 左 外 边 距 


， 但 是 要 设置 左 外 边 距 。 
写 XHTML 代 码 如 下 。 


代码 5-1 


01 


3 
14 


<!1DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 左 栏 宽度 固定 右 栏 宽度 自 适应 </title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="doc" class="cf"> 
<div class="side fl"> 左 栏 </div> 
<div class="main "> 右 栏 </div> 
</div> 
</body> 
</html> 


h 一 栏 浮动 ， 并 设置 宽度 ， 另 一 栏 是 默认 文档 流 ， 即 没有 定位 ， 也 没 


第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 14 行 
是 页 面 的 html 标 签 。 第 08 行 和 第 13 行 是 页 面 的 body 标 签 。 第 09 行 和 第 12 行 是 页 面 最 外 层 容 器 
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#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 .side， 第 11 行 是 右 栏 .main。 
根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 


代码 5-2 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 
02 * .cflzoom:17} 
03 .fl{float:left;display:inline;} 
04 body{background:#ddd;} 
05 #doc{width:310px;font-family:" 微 软 雅 黑 "; font-size:18px; color:#fff;} 
06 .side{width:100px;background:red;height:100px; margin-right:-3px; } 
07 .main{ height:100px;background:green;height:100px; 
margin:0 0 0 100px; margin:0 0 0 97px;} 


第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮动 容器 的 高 度 变化 时 ， 外 
层 容器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .fl 类 ， 通 过 float:left 设 置 了 向 左 浮动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 第 
04 行 是 页 面 中 body 标 签 的 样式 ， 并 设置 了 背景 颜色 ，body 标 签 的 宽度 和 高 度 也 等 于 浏览 器 显 
示 区 域 的 宽度 和 高 度 。 第 05 行 是 网 页 最 外 层 容器 #doc 的 样式 ， 设 置 了 宽度 为 310px， 字 体 是 微 
软 雅 黑 ， 文 字 大 小 是 18px， 文 字 颜 色 是 和 白色。 第 06 行 是 左 栏 容 器 .side 的 样式 ， 设 置 了 宽度 为 
100px， 背 景 颜 色 是 红色 ， 高 度 是 100px。 第 07 行 是 右 栏 容 器 ,main 的 样式 ， 设 置 了 背景 颜色 是 
绿色 ， 高 度 是 100px， 左 外 边 距 是 100px。 


第 06 行 的 “_ margin-right:-3px;” 和 第 07 行 的 “ margin:0 0 0 97px;” 是 为 了 解决 在 IE 6 下 ， 左 栏 
天 和 右 栏 产生 的 3px 间 际 的 问题 。 在 CSS 样 式 中 的 属性 前 面 添加 下 划 线 “ ”， 是 解决 下 6 中 bug 的 
” ”一 种 CSS Hack 方 法 。 引 起 这 个 问题 的 原因 可 能 是 IE 6 对 页 面容 器 或 标签 特有 的 泻 染 机 制 。 


通过 CSS 样 式 中 对 #doc、.side 和 .main 的 宽度 的 设置 可 以 看 出 ，.main 的 width 取决 于 .side 的 
width 和 #doc 的 width， 右 栏 样式 中 margin-left 的 值 就 是 左 栏 的 宽度 。 
在 浏览 器 中 的 显示 效果 如 图 5.2 所 示 。 


#doc 


| 网 页 宽度 | body 


图 5.2 在 浏览 器 中 的 显示 效果 


5.2.2 一 栏 绝对 定位 ， 另 一 栏 默认 文档 流 并 设置 向 左 外 边 距 


左右 两 栏 中 ， 其 中 一 栏 设置 成 绝对 定位 ， 并 设置 宽度 ， 另 一 栏 是 默认 文档 流 ， 即 没有 定 
位 ， 也 没有 浮动 ， 但 是 要 设置 向 左 外 边 距 。 
编写 XHTML 代 码 如 下 。 
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代码 5-3 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 栏 宽度 固定 右 栏 宽度 自 适应 </title> 
06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <div id="doc"> 

10 <div class="side poa"> 左 栏 </div> 
11 <div class="main"> 右 栏 </div> 

12 </div> 

13 </body> 

14 </html> 


在 代码 5-3 的 XHTML 结 构 中 ， 左 栏 最 外 层 容器 的 类 是 side 和 poa， 右 栏 最 外 层 容 器 的 类 是 
Imain，id 是 doc 的 <div> 标 签 为 包含 左右 两 栏 的 最 外 层 容 器 。 
根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 


代码 5-4 


01 body{background:#ddd;} 
02 #doc{fwidth:310px;height:100px;position:relative;font-family:" 微 软 雅 黑 "， 
font-size:18px;color:#fff;} 

03 .poa{position:absolute;} 

04 .side{width:100px;height:100px;background:red;top:0px;left:0px;} 

05 .main{ height:100px;background:green; margin:0 0 0 100px;} 

第 01 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 。 第 02 行 是 网 页 最 外 层 容器 #doc 的 样 
式 ， 设 置 了 宽度 为 310px， 高 度 是 100px， 相 对 定位 ， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 
字 颜 色 是 白色 。 第 03 行 定义 的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容 
器 都 会 相对 父 容器 进行 绝对 定位 。 第 04 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 高 度 
是 100px， 背 景 颜色 是 红色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容器 左边 缘 0px。 第 05 行 是 右 栏 
容器 .main 的 样式 ， 设 置 了 高 度 是 100px， 背 景 颜 色 是 绿色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容 
器 左边 缘 100px。 

与 5.2.1 中 介绍 的 方法 一 样 ，main 的 width 取决 于 .side 的 width 和 #doc 的 width， 右 栏 样式 中 
margin-left 的 值 就 是 左 栏 的 宽度 。 

在 浏览 器 中 的 显示 效果 与 图 5.2 相 同 。 


5.3 网 页 实例 


前 面 分 析 了 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 的 网 页 布局 并 介绍 了 实现 方法 。 本 节 将 以 
一 个 实际 的 页 面 为 例 ， 详 细 介绍 这 种 布局 的 页 面 制作 方法 。 


@、 | DIV+C SS 布局 与 样式 之 网 站 设计 基础 
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5.3.1 效果 图 分 析 


如 图 5.3 所 示 是 一 个 在 线 阅读 页 面 “ 


呈 


Ph 外 名 著 大 全 ”的 效果 图 。 


表 作 。 小 说 济 过 


特 太 太 和 其 全 不 持 的 女儿 可 甬 会 无 守 可 归 。 


F 闭 庄 司 ， 同 住 约 汪 有 他 的 丙 位 姐妹 一 产 利 小 姐 和 已 儿 的 岂 世 特 太太 ， 后 者 
二 开 有 五 干 开 的 入 ， 心 情 准 动 ， 轴 望 招 女儿 折 的 到 

一 场 人 失 舞 会。 舞会 开始 时 ， 人 们 人 
本 们 就 发现 达 西 先生 并 不 讨 人 喜欢 ,因为 他 自 辣 
全 苍白 。 当 疡 利 先生 建议 ip9 和 伊 东 白 
为 是 个 优秀 的 ， 令 人 伯 I 士 ， 而 他 对 


这 西江 生 吉 对 伊 表白 产生 了 不 可 进 制 的 感情 ， 但 全 姑 力 区 山 ， 后 
下 高, 区 他 人 于 后 。 而 急 而 水 白 一 直 不 知道 襄 估 的 达 本 先 : 
客人 竺 末 访 * 众人 兴 百 地 请 现 未 客 好 齐 ， 发 现 原 未 时 


关 现 全 他 白 的 家 人 举目 相 俗 ， 而 且 未 的 1 
她 ， 而 忆 肥 各 直 来 二 深 。 后 来 ， 旨 内 特 寺 生 豆 
条 兄 柯 村 新 先生 、 柯 村 新 是 个 号 执 和， 仿 人 讨厌 的 牧师 ， 将 富 
读 《 对 年 经 女性 扩 布 省 》 之 于 的 并 做 书 视 为 “愉快 认 蜡 活动 ”。 佬 号 找 一 切 机 会 扫 及 他 的 妇 田 人 雇 妹 六- 竺 - 狗 尔 天 人 ， 
让 四 认 一 樟 对 她 阿 奥 玛 承 。 四 当 厂 洲 夫 人 功 他 查找 个 要 子 ， 柯 福 新 便 在 他 “可 导 的 未 秆 ” 中 导 拷 人 选 ， 认 为 这 样 台 不 会 让 
3H 风 生肖 的 0j 产 了 竹 ， 对 了 方 棚 有 好 水。 ， 但 得 知 好 “几乎 已 经 和 产 利 先生 订 媳 ” 之后， 开始 
至 记 图 强迫 伊 丽 东 白 首 青 , 然 

但 加 果 你 嫁 的 省， 全 是 儿 不 再 你 
下 页 检 先生 英俊 述 入 ， 风 度 阳 内 

他 杭 坏 ， 令 他 失去 了 本 来 咀 手 可 得 的 时 高 


相 产 永 好， 下 洁 特 答 仔 ， 二 人 各局 她 了 。 址 站 特 木 太 引 
六 天 里, 他 让 把 傍 无 比 痛心 ， 写 亲 的 长 于 志 间 全 好 礁 过 ， 全 示范 白 应 林 杖 由 先生 
生活 特 斤 夫妇 之 往 蚊 不 天 入 的 罗 新 新 庄 轩 看 见 达 西 先 生 ， 他 是 夫人 的 峙 仔 ， 这 西 先 
生 特 争 扎 ， 涯 面向 全 看 法 ,人 他 洁白 的 赤 虚 人 但 因为 达 本 先生 | 直入 和 生 


和 控 和 尼姑 是 达 西 先生 种 用 扶 补 利 ja 在 一 


所 有 男人 痢 嘴 光 了 ， 《她 ) 也 不 可 


在 天 学 中 相遇 。 达 五 
从 、 令 人 重 反 的 条 珀 外， 他 罗 
让 也 条 认 ， 牙科 持 的 个 性 全 得 其他 大 鸡 [) 克 


后 六， 雪 本 法 白 和 地 的 岁 与 喜 苦 引 夫 妆 同 佛 入行， 并 人 
。 沁 丁 的 行 力 笠 止 时 等 切 了 许多 。 堵 而 芷 所 这 才 娄 现 ， 


图 5.3 “中 外 名 著 大 全 ”的 效果 


如 图 5.4 所 示 ， 网 页 分 为 左 栏 和 右 栏 两 个 部 分 。 


第 5 章 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适应 的 布局 


生产 本 的 代表 作 。 小 说 讲述 
、 旭 jE 情态 。 


了 站 之 女人 而 3 白 -内 竺 的 委 情 交 事 ， 芭 应 了 19 忆 纪 英 国 儿 坟 只 是 的 礼节 、 成长、 教育 、 关 i 
内 容 简介 


档 心 主题 是 围 风 乔 : 英国 地 主 交 雹 类 旅 的 情 品 F 引 十 


于 理 内 特 先生 多 孝 9ja 苞 在 书房 里 ， 半 开 妻子 班 内 特 太 
的 财产 在 班 内 特 先 


女 主 生 是 20 岁 的 伊 丽 耻 日 "得 内 待 ， 地 机 要、 条 
太 。 更 内 将 太太 缺乏 教养 和 ; 五 个 女儿 都 柠 千 有 站 由 于 没有 男性 继承 人 ， 班 内 特 家 7 多 
生死 后 要 姑娘 们 的 表 史 笨 林 斯 先生 来 翅 束 ， 班 闪 竺 太太 和 其 他 直播 的 女儿 可 能 会 无 乏 可 归 - 


,起 和 已 婚 的 再 斯 特 本 本 ， 后 者 


| 
伊 丽 蓉 白 最 亲近 的 粗 姐 一 


这 西部 涪 : “她 还 没有 
的 爱 槛 也 相当 明显 。 


达 西 先生 却 对 急 丽 汞 白 产 生 了 不 可 间 制 的 及 情 ， 但 他 渴 力 焉 久 ， 后 来 发 现 伊 丽 荡 白 的 家 人 兰 止 粗 份 ,而 且 来 威 的 地 位 也 
不 襄 ， 合 他 租 予 盾 ， 而 争 丽 水 白 一 直 不 知道 高 像 的 这 西 先生 已 经 爱 上 了 她 ， 而 且 爱 莫大 未 赵 宁 。 后 米 ， 班 内 特 先生 二 布 一 位 
客人 将 来 访 。 众 人 兴奋 地 铺 测 末 客 是 堆 ， 发 现 原 来 是 她 们 的 表 兄 柯 林 灯 先生。 柯 林 煌 是 个 叶 中 聊 利 ， 令 人 讨厌 的 牧师 ， 将 宣 
的 布道 》 之 类 的 道德 书 锅 为 “愉快 认 允 活动 ”。 他 寻 投 一 切 机 会 提 及 他 的 女 糙 由 SB 林 ， 秆 .好 尔 夫人 ， 
样 对 她 阿 奥 奉 季 。 因 当下 淋 夫 人 劝 他 得 投 个 雪子 ， 柯 林 煌 便 在 他 “可 惟 的 来 妹 ” 中 寻找 人 选 ， 认 为 这 样 就 不 会 让 
二 宗 的 和 产 落 入 别人 之 手 ， 对 双方 都 有 好 水 。 笨 林 白 原 属意 的 是 珍 ， 但 得 知 她 “几乎 已 经 检 训 利 俐 生 订婚 ”之 后 ， 开始 
目光 转 向 可 受 的 仇 面 涝 白 、 志 而 林 白 自然 不 肯 皖 他 ， 但 三 为 将 太太 机 力 交 持 这 门 量 事 ， 其 至 试 EEBai 自 伊 丽水 白 首肯 。 然 
而 ， 明 昌 事 理 的 荒 闪 特 先生 却 对 懂 面 他 白 说 : “加 果 你 不 烷 柯 林 靳 先生 ， 理 你 了 ， 但 如 办 你 妨 的 话 ， 便 是 我 不 理 你 
了 ，”， 从 而 表示 支持 爱 女 的 决定 。 与 此 同 寸 ， 伊 丽 荡 白 认识 了 一 位 平 官 ， 圳 克 翰 ; 市 克 埋 先生 英 介 迷 人、 风度 册 出， 
活 ， 韦 克 关 站 告 折 她 : 达 下 先生 曾 对 他 很 坏 ， 令 他 失去 了 本 来 咕 手 可 到 的 财 室 


读 芝 对 年 生 - 
像 哈巴 狗 


被 拒绝 后 先生 转 而 向 伊 而 太白 最 好 的 朋友 夏 洁 特 ， 二 卡 源 求婚 ， 夏 洁 特 答应 ,二 入 很 快 结婚 了 。 班 内 特 太 太 非 
常 失 望 ， 但 让 好 更 失望 的 是 不 久 亏 利 先生 实 状 知 四 伦敦 。 竺 无 比 箭 心 ， 母 幸 的 长 于 委 吧 更 合 好 难过 。 伊 丽 莎 扬 应 柯林斯 先生 
饭 业 夫妇 之 浒 ， 去 参 现 他 们 教区 ， 在 需 正 漆 * 德 * 驳 水 夫人 的 区 条 类 庄 园 看 见 达 枉 先生 ， 他 是 夫人 的 姨 促 , 达 枉 先 
生 几 鼻 争 所 ， 当 面向 沁 丽 苏 白 了 本 插 ， 但 他 洁白 的 赤 度 从 全 做 慢 ， 伊 丽 荡 白 大 为 停 订 ， 但 因为 达 西 先生 的 太 谍 、 刷 克 帕 先生 
之 前 的 指控 和 丁 先 生 曾 阻 乒 志 利和 球 在 一 起 ， 傅 竺 的 她 洁 知 达 西 : “ 色 合 世界 上 所 有 男人 条 REX 了 ，《 她 ) 也 不 可 
能 同 他 和 车 芒 ，” 


第 二 天 早上 ， 专 丽 薄 白 与 达 古 先生 在 散步 中 相遇 。 达 西 : 自 一 封 信 ， 然 后 准 准 离开 <。 信 中 达 西 为 自己 | 
护 - 他 王道 ， 除 了 好 那些 毕 止 粗俗 、 令 人 利 这 的 李 直 外 ， 他 风 玉 看 上 去 : 为 她 并 不 再 心 余 声 利 ， 思 考 再 : 
去 放弃 。 伊 丽 东 白 也 季 认 ， 浴 逢 持 的 个 性 使 月 其 他 人 难 愉 确定 她 的 身心 。 同 十， 达 西 也 提升 了 市 克 理 花 祁 公 子 、 投 机 卜 巧 的 
直面 目 。 达 本 以 前 的 行为 有 了 新 的 合理 名 竹 ， 伊 丽 楚 白 对 他 的 偏见 也 苹 浙 消除 了 。 


后 未 ， 伊 丽水 白 和 她 的 竖 父 结 走 苇 纳 夫妇 同 僧 访 行 ， 并 参观 了 达 西 先生 的 帮 导 彭 从 里 。 在 庄园 大 向 步 的 B 候 三 巧 适 达 
酉 。 达 音 的 行为 位 止 旺 ; 这 才 发 坝 ， 原 来 他 约 便 慢 后 面 隐藏 着 肌 诚 、 慷 眉 的 本 性 ， 对 他 开始 有 所 欢 
观 。 


企 当 二 人 正在 盎 进 夸 肯 的 8 却 安 然 笋 到 消息 ， 得 知 伊 丽 焚 白 的 穆 妹 丙 连 亚 私奔 了 。 由 于 伊 丽 东 白 的 院 忽 ,没有 指 需 
直 克 办 的 种 画 目 ， 才 合 得 年 办 功 礁 的 而 迫 亚 上 了 当 ， 同 韦 克 峭 双双 进击 车 团 答 迁 奢 债 。 达 廿 找 2 了 韦 克 炳 ， 闪 他 还 浅 了 峙 使 


并 追 使 业 同 画 过 亚 车 效 ， 了 面 迪 亚 和 三 内 竺 完 的 ; 管 达 西 要 求 保密 ， 但 丽 迪 亚 的 | 嗜 和 喜 著 纳 术 本 晤 终 的 坦白 仍 
使 全 丽 范 所 了 甬 了 立 情 ， 并 知 诺 所 尘 了 好 对 达 西 的 情感- 


这 西 的 姨 屿 清 其 琳 大 人 威胁 菇 而 你 白 不 要 答应 达 洒 先生 的 求 嬉 ， 坚持 达 西 必须 要 自己 的 女儿 。 伊丽莎白 这 才 发 现 并 明白 
定 利 先生 菩 回 乡间 ,外 加 | 珍 的 身边 时 《他 们 很 恢 订 峰 了 】， 


-4 网 页 分 为 左 栏 和 右 栏 两 个 部 分 


1.. 左 烂 
左 栏 分 为 网 页 标志 和 导航 ， 如 图 5.5 所 示 。 


全 、| DIV+CS S 布 局 与 样式 之 网 站 设计 基础 


到 5.5 左 栏 


网 页 标志 ， 是 一 段 有 背景 图 案 的 中 文 ， 并 带 有 链接 ， 这 个 链接 指向 网 站 的 首页 或 主题 页 
。 导 航 是 一 系列 的 文字 链接 ， 这 些 链接 之 间 用 横 线 分 隔 。 

2. 右 栏 

右 栏 分 为 2 个 模块 ， 分 别 是 创作 背景 和 内 容 简 介 ， 如 


创作 背景 


D2 


凡 


5.6 所 示 。 


DHE yee 


NN, WW a 
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第 5 章 一 术 完 度 固定 ， 另 一 栏 宽度 自 适应 的 布局 


创作 背景 包括 标题 和 文字 段落 ， 如 图 5.7 所 示 。 


创作 背景 标题 


iudice) ， 出 版 于 1813 年 ， 是 19 世 纪 英国 小 说 家 简 奥 斯 丁 的 代表 作 。 人 小 说 讲述 | 
”机 应 了 19 世 纪 英 国 乡绅 阶层 的 礼节 、 成 长 、 教 育 、 道 德 、 婚 姻 的 情态 。 


文字 段落 


图 5.7 创作 背景 


内 容 简介 包括 标题 和 文字 段落 ， 如 图 5.8 所 示 。 


核心 主题 是 围绕 符 16 世 纪 让 19 世 纪 初 ， 英 因 地 王 多 绵 测 诸 的 情 | ja 
段落 间距 

妇 主 角 是 30 闪 的 全 更 项 白 "更 内 桂 ， 闻 机 智 、 表 等 、 著 良 。 她 尽 亲 条 站 特 元 生 多 效 6 问 荐 在 书房 里 ， 适 开 雪子 条 内 特 太 
。 焉 内 将 术 杰 据 乏 残 养 和 远见 ， 只 起 把 五 个 女儿 吉 控 哲 有 写 阐 士 。 由 于 没有 男 仁 红 圣人 ， 斑 内 特 寺 趟 多 的 姥 斑 在 训 内 特 先 
死 后 鞠 然 媳 们 的 表 兄 柯 梓 斯 先生 未 经 承 ， 班 内 特 太太 和 其 他 让 是 的 女儿 可 能 会 无 系 可 眉 . 


宾利 上 生 最 近 租 下 了 理由 管家 附 返 的 尼日尔 匡 庄 园 ， 同 仔 的 还 有 他 的 隔 位 妇 估 一 一 宾利 ,秀和 已 类 的 地 新 特 本本， 后 者 
8 夫 引 风 认 ， 没 多 少 虽 产 。 班 从 大 条 启 和 夫 生 每 年 五 这 的 业 入 ， 侦 亲 动 ， 清 笃 妇 拉夫 守 和 先生 。 不 
和 ， 诡 利 先生 去 了 从 各 一 摘 ， 沉 加 了 人 的 及 这 本 二， 世 们 细 加 了 在 时 的 一 潭 公关 拓 全 各 去 开始 时 ， 人 人 公认 相生 
Od FE me 
bE 身 边 记 具 “和 下 人 ”要 高 责 。 靖 由 家 有 人 轩 向 民 蕊 ， 攻 i 这 可 先生 要 了 人 下 日。 站 利 先生 于 这 各 避 胡 闻 白 
过 sp 说 。 “外 还 没有 六 虽 避 D9] 动 中 的 池 步 、” 得 示 科 先生 到 浪人 认 广 星 个 优秀 的 ， 令 人 以 的 半 士 ,而 他 对 
而 三 果林 但 一 滁 的 有 天 四 检 8 


达 丁 先生 却 对 伊 古 东 白 产 生 了 不 可 授 制 的 后 丧 ， 但 世 强 力 隐 柄 ， 后 未 发 现 仇 画 东 日 的 家 人 芋 止 得 从 而 且 条 威 的 地 位 也 

， 使 他 根 矛 所 ， 而 伊 再 水 白 一 直 不 知道 高 像 的 达 西 先生 已 经 受 上 了 她 ， 而 且 爱 槛 类 末 巡 腔 。 后 未 ， 斑 内 特 先生 宣布 一 位 
客人 将 来 沪 。 众 人 兴 百 地 生 天 客 是 认 ， 发 观 原 末 是 站 们 的 赤 史 柯 村 新 先生 、 何 性 新 是 和 0 册 利 ， 令 人 讨厌 约 钦 师 ， 将 宣 
雇 世 对 证 经 女性 的 布道 洗 之 类 的 道德 书 视 为 “ 凡 快 认 晓 活动 ”。 恤 守 找 一 切 机 会 授 及 如 的 女 樵 丰 人 淹 3E23， 德 ， 屿 下 夫人 ， 

四 向 一 衬 对 好 朵 议 要 鲜 。 因 抽 下 六 夫人 入 他 得 找 个 雪子 ， 柯 林 灯 全 在 他 “可 二 的 表 绪 ”中 寻找 人 迁 ， 认 为 这 称 凡 不 会 让 
放 内 特 家 的 时 产 洲 人 别人 之 手 ， 对 双方 都 有 好处 。 柯 林 央 藉 屋 富 的 录 党 ， 但 得 知 奸 “ 几 竹 已 经 和 安利 共生 订婚 ” 之后， 开始 
竺 目光 竺 向 可 营 的 人 而 基 白 "化 面 东 自 让 总 不 衣 综 他 ， 巷 六 内 特 太太 补 力 支持 这 站 者 事 ， 甚 至 斌 器 履 刘 化 而 东 白 首 胡 。 然 
| 而 ， 明 自 事 建 的 就 内 特 先 主 吉 对 仇 丽 禁 白 说“ 如果 价 不 标 栖 村 新 先 主 ， 你 攻 条 不 渤 你 了 ， 但 如 办 加 巡 的 于 ， 便 是 向 不 娃 你 

”， 从 而 表示 支持 受 女 的 天 二 。 与 此 同时 ， 伊 重 共 扬 认 识 了 一 位 军 富 ， 市 克 秆 先生 。 市 页 机 先生 丙 食 过 和 人、 风 碍 刚刚 ， 
| 人 全 而 东 忆 员 至 祭 心 于 信 。 旺 他们 一 人 有 次 谈 活 ， 布 克 四 部 千 诉 她 : 达 西 寺 生 局 他 人 委 坏 ， 令 他 失去 了 本 让 球 手 习 得 的 时 避 
和 机 会 ， 伊 甬 水 自 听 后 ,村 加 民生 达 湘 先生 了 。 


被 拒 纺 后 ， 柯 村 疡 先生 特 而 向 伊 画 巷 白 最 他 的 明 友 丰 洛 特 ， 广 卡 新 求婚 ， 夏 洁 特 各 应 ,二 入 祖 快 乱 婚 了 。 斑 内 特 太太 非 

失望 ， 但 让 好 更 失 包 的 是 不 思 喜 利 先生 实 抑 控 回 丛 攻 。 防 无 比 病 心 ， 续 来 的 长 于 全 友 更 使 录 难过 。 伊 丽 东 白 应 柯 林 姑 先生 

囊 法 特 新 播 夫妇 之 串 ， 去 艺 观 他 们 载 区 ， 在 沽 耻 间 ， 禄 “ 昨 尔 夫人 的 轨 $ 匠 庄园 看 见 这 西 先生 ， 节 是 去 人 的 村 怪 ， 这 丁 先 

全 几 重 妾 扎 ， 当 画 向 作 征 打 白 巴 求 棋 ， 介 也 省 白 的 访 志 全 是 作 慢 ， 华 届 荡 白 大 为 停 证， 但 因为 达 亚 寺 生 的 太 谨 、 训 真 棕 先生 

前 的 招 控 和 得 和 是 达 并 先生 甸 找 定 利 和 验 在 一 起 ,局 畦 的 好 志 知 过 西 ; “即使 世界 上 所 有 男人 都 死 克 了 ，《 凶 ) 也 不 可 
同 他 结 接 。 


第 二 天 学 上 ， 仇 东 局 与 达 西 先生 在 表 步 中 相通 过 西 给 全 更 芭 白 一 季 信 ， 关 后 冷 崔 高 开 稍 中 过 下 为 后 忆 的 行为 符 

| 护 - 他 写 道 ， 除了 角 屠 些 尘 目 烛 自 、 会 人 增 吉 的 款 葡 站， 节 风 珍 看 上 去 无 动 于 事 ， 以 力 她 并 不 坡 心 妖 宾 利 ， 现 考 两 三 才 动 朋 

友 衣 译 。 伊 丽 荡 上 也 孙 认 ， 除 邯 持 的 个 性 医 得 其 他 人 难以 碳 定 旭 约 喜 心 。 同 对 ， 达 西 也 揭 索 了 圭 页 办 和 和 花 公 子 、 投 机 取 巧 的 
面目 、 法 丁 以 前 的 行为 有 了 新 的 计 理 解 奔 ， 伊 丽 范 所 对 他 的 含 风 也 这 源 漂 珠 了 < 


后 案 ， 全 硬 苍白 和 姓 的 里 父母 喜 东 纳 夫 本 月 代 让 行 ， 并 艺 观 了 寺 亚 先生 的 雪 寺 和 从 里。 在 庄 居 记 甫 生 的 时 让 音 志 误 这 
西 , 法 亚 的 行为 基 止 显得 过 切 了 许 多 。 鱼 硬 基 白 这 才 发 疯 ， 原 未 信 的 分 慢 后 而 鸡奸 让 诚 、 博 低 的 本 性 ， 对 他 开始 有 所 发 


十 
但 涯 二 人 正直 区 法 古 情 的 时候 ， 却 实 基 路 到 消息 ， 和 知 伊 画 革 忆 扒 疾 奸 而 过 下 权 夺 了。 由 于 人 本 范 白 的 苇 好 ， 设 有 操守 


过 西 的 后 号 所 卫 浊 夫人 威 肝 伊 古林 所 不 要 答 序 达 亚 先生 的 中 娩 ， 坚 振 达 西 必须 要 自己 的 雪 儿 - 鲜 丽 范 白 这 才 闪现 并 后 
| 了 Bh 所 各 己 拒 过 了 这 本 的 芝 一 次 求婚 ,过 西 介 委 姓 。 当 本 将 产科 先生 市 加 乡间 ，EBl 站 的 曙 # 寺 《他 们 可 和 订 妊 了 ) ， 
急 而 站 后 向 过 醒 闻 开 了 心计 ， 坟 误 闪 于 绽 临 


图 5.8 内 容 简介 


人 |DIV+CSS 布 三 式 之 网 站 设计 基础 


5.3.2 切 图 


页 面 在 Photoshop 中 的 切片 如 图 $.9 所 示 。 


加 创作 背景 


《傲慢 与 偏见 》 (英文 : Pride and Prejudic 
女 伊丽莎白 * 班 内 特 的 爱情 故事 ， 反 应 了 


国 8 核心 主题 是 围绕 着 18 世 纪 未 1 世纪 初 ， 英 国 地 


女 主角 是 20 岁 的 伊丽莎白 ' 班 内 特 ， 她 机 智 、 
太 。 班 内 特 太 太 缺乏 教养 和 远见 ， 只 想 把 五 个 女儿 
站 柯 相 ee 来 继承 ， 班 内 特 

png 
人 了 侍 近 的 尼日尔 斐 
的 丈夫 徒 有 风度 ,没有 多 少 财产 。 班 内 特 太 太 知道 
久 ， 宾利 先生 去 了 伦敦 一 未 , 带 回 了 他 的 朋友 达 西 
有 高 达 10, 000 英 镑 的 收入 的 达 西 先生 是 最 棒 的 。 然 


图 5.9 页 面 在 Photoshop 中 的 切片 


切割 网 页 图 片 包括 head-bg nefUsidebar Deck pas, 其 中 ，head-bg.png 是 网 页 标志 的 背景 
图 片 ，sidebar- png 是 网 页 导航 的 背景 图 片 。 


5.3.3 绘制 框架 图 


根据 前 面 对 网 页 效果 图 的 分 析 ， 绘 制 出 页 面 大 体 的 框架 图 ， 如 图 5.10 所 示 。 
屏幕 
主体 内 容 
左 栏 


右 栏 


到 5.10 页 面 框架 


网 页 的 左 栏 和 右 栏 在 整个 框架 图 中 分 别 位 于 页 面 中 的 左边 和 右边 ， 在 HTML 结 构 中 按 昭 
从 上 到 下 的 顺序 编写 ， 这 两 部 分 在 浏览 器 中 也 是 从 上 到 下 按 顺 序 显示 。 框 架 图 中 的 左 栏 对 羽 
页 面 效 果 图 中 的 左 栏 ， 框 架 图 中 的 右 栏 对 应 页 面 效 果 图 中 的 右 栏 。 
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5.3.4 编写 XHTML 代码 


前 面 分 析 了 网 页 效果 图 ， 并 在 第 5.3.3 小 节 中 绘制 出 了 页 面 大 体 的 框架 图 ， 编 写 网 页 的 


XHTML 代码 如 下 。 
代码 5-5 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 中 外 名 著 大 全 </title> 
06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 
08 <body> 
09 <div class="side fl"> 
10 <hl><a href="index.html"> 中 外 名 著 </a></hl> 
] <ul class="list-unstyled list"> 
a <li><a href="#home" class="anchorLink"> 
<i class="icon-home scolor"></i> 傲 慢 与 偏见 </a></1i> 
13 <li><a href="#.team" class="anchorLink"> 
<i class="icon-user scolor"></i> 基督 山 伯 酮 </a></1i> 
14 <li><a href="#.service" class="anchorLink"> 
<i class="icon-retweet scolor"></i> 简 爱 </a></1i> 
15 <li><a href="#.feature" class="anchorLink"> 
<i class="icon-road scolor"></i> 小 妇 人 </a></1i> 
16 <li><a href="#.testimonial" class="anchorLink"> 
<i class="icon-info scolor"></i> 童年 </a></1i> 
17 <li><a href="#.ptable" class="anchorLink"> 
<i class="icon-gift scolor"></i> 际 </a></1i> 
18 <li><a href="#.contact" class="anchorLink"> 
<i class="icon-envelope scolor"></i> 老 人 与 海 </a></1i> 
9 </ul> 
20 </div> 
21 <xdiv class="main"> 
22 <h2> 创 作 背 景 </h2> 
23 <p>《 傲 慢 与 偏见 》 (英文 : Pride and Prejudice) …… 婚姻 的 情态 。</p> 
24 <h2> 内 容 简 介 </h2> 
2 <p> 核 心 主题 是 围绕 着 18 世 纪 末 19 世 纪 初 ， 英 国 地 主 乡 绅 贵 族 的 情感 和 婚姻 问题 。</p> 
26 <p> 女 主角 是 20 岁 的 伊丽莎白 - 班 内 特 …… 无 家 可 归 。</p> 
27 <p> 宾 利 先 生 最 近 租 下 了 …*… 珍 的 爱慕 也 相当 明显 。</p> 
28 <p> 达 西 先生 却 对 伊丽莎白 产生 了 不 可 过 制 的 感情 …… 更 加 厌恶 达 西 先生 了 。</p> 
29 <p> 被 拒绝 后 …… 伊 丽 莎 白 对 他 的 偏见 也 逐渐 消除 了 。</p> 
30 <p> 后 来 他 开始 有 所 改观 。</p> 
SE <p> 但 当 二 人 正在 增进 感情 的 时 候 …… 并 彻底 扭转 了 她 对 达 西 的 情感 。</p> 
2 <p> 达 西 的 姨 母 凯瑟琳 夫人 威胁 伊丽莎白 不 要 答应 …… 幸 福 终于 降临 。</p> 
33: </QiV> 
34 </body> 


35 </html> 


第 01 行 是 网 页 的 <IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必 须 是 HTML 文档 的 第 一 行 ， 位 
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于 <html> 标签 之 前 。 第 02 行 和 第 35 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTMI 文 档 。 

第 03~07 行 是 HTML 文 档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 的 元 
素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 

第 04 行 用 <meta> 标 签 定义 网 页 的 编码 方式 是 utf-8。 第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 
引用 的 样式 文件 地 址 。 第 08~34 行 是 网 页 主体 。 第 08 行 和 第 34 行 是 <body> 标 签 ，<body> 标 签 
用 于 定义 HTMI 文 档 的 主体 。 

第 09~20 行 是 网 页 的 左 栏 。 第 09 行 和 第 20 行 是 网 页 左 栏 的 最 外 层 容 器 ，class 为 side 和 fl， 
其 中 ， 类 有 用 于 使 左 栏 向 左 浮动 。 

第 10 行 是 网 页 的 标志 ， 由 <h1> 标 签 包含 标志 文字 “中 外 名 著 ” 组 成 ， 由 于 单 击 标志 可 以 
跳 转 到 网 站 首页 ， 因 此 ， 在 “中 外 名 著 ” 外 面 增加 <a> 标 签 ， 指 向 首页 地 址 index.html。 

第 11~19 行 是 网 页 导航 ， 用 <ul> 标 签 包含 7 个 <li> 标 签 ， 其 中 每 个 <li> 标 签 在 页 面 上 呈现 为 
一 个 导航 项 ， 每 个 <li> 标 签 中 分 别 包含 <a> 标 签 ， 用 于 指向 导航 链接 地 址 ，<a> 标 签 中 包含 导 
航 文字 。<ul> 标 签 上 面 有 样式 类 list。 

第 21 行 ~ 第 33 行 是 网 页 中 的 右 栏 。 第 21 行 和 第 33 行 是 右 栏 最 外 层 容器 ， 该 容器 上 的 类 名 
为 main。 第 22 行 是 创作 背景 模块 的 标题 ， 由 <h2> 标 签 包含 标题 文字 “创作 背景 ”组 成 。 第 
23 行 是 创作 背景 模块 中 的 文字 ， 由 <p> 标 签 包含 若干 文字 组 成 。 第 24 行 是 内 容 简介 模块 的 标 
题 ， 由 <h2> 标 签 包含 标题 文字 “内 容 简 介 ” 组 成 。 

第 25~32 行 是 内 容 简介 模块 中 的 文字 ， 这 部 分 由 8 个 文字 段落 组 成 ， 即 由 8 个 <p> 标 签 分 别 
包含 若干 文字 组 成 。 


5.3.5 编写 CSS 代 码 


根据 对 网 页 效果 图 和 XHTML 代 码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 。 
代码 5-6 


01 /*css reset*/ 

02 body,div,dl,dt,dd,ul,ol,1i,hil,h2,h3,h4,h5,h6é,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote,th,td{margin:0; padding:0;} 

03 table{border-collapse:collapse; border-spacing:0;} 

04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 a{text-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:'';} 

11 abbr, acronym{border:0; font-variant:normal;} 


12 address,cite,dfn,optgroup,em,var{font-style:normal;} 

13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 

15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 
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x CEIZOom: 17} 

/*global css*/ 

a{color:#333;text-decoration:none;} 
a:hover{text-decoration:underline;} 

-fl{float :left;display:inline;} 

-fr{float:right;display:inline;} 
body{font-size:12px;color:#333;font-family:" 宋 体 ",，Arial, 
Verdana, Geneva, Helvetica, sans-serif;} 

/*module css*/ 
.side{background:url(../images/sidebar-back.png) 

repeat #333;width:240px;font-family: "微软 雅 黑 ";} 

hl{margin:25px 15px;padding:20px;border-bottom:lpx solid #111; 
background:url(../images/head-bg.png) repeat #70c8e0;font-size:42px;} 
hi a{colorstEfEE?} 

hl a:hover{color:#fff;text-decoration:none;} 
.list{margin-top:20px;border-top:lpx solid #222; 
border-bottom:lpx solid #090909;} 

.list li{padding:10px 0 10px 15px;border-top:lpx solid #222; 
border-bottom:lpx solid #090909;} 

.list li a{font-size:14px;color:#fff;} 

.main{margin:0 20px 0 260px;padding:20px 0;} 

main h2{font-size:22px;margin:0 0 20px 0;} 

main p{line-height:30px;font-size:14px;text-indent:2em;margin:0 0 20px 0;} 


CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 重 置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 
重 置 样式 ， 第 17~22 行 是 公共 样式 ， 第 23~33 行 是 模块 样式 。 通 过 CSS 重 置 代码 ， 对 相关 元 素 
的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 
提高 浏览 器 的 兼容 性 。 通 过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 在 不 同 的 模块 中 重复 应 
用 ， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 

第 01 行 ~ 第 16 行 的 详细 讲解 ， 请 参考 第 2 章 。 后 面 每 一 章 的 CSS 重 置 代码 都 是 相同 的 ， 在 
制作 一 个 新 网 页 时 ， 可 以 先 把 这 部 分 CSS 样 式 复制 到 新 页 面 的 CSS 样 式 表 中 ， 再 开始 编写 新 
页 面 的 公共 样式 和 各 个 模块 的 样式 。 

第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设置 了 颜色 、 下 划 线 是 否 显示 。 其 中 第 
18 行 中 的 text-decoration:none 表 示 页 面 中 的 所 有 链接 在 普通 状态 下 不 显示 下 划 线 ， 第 19 行 的 
text-decoration:underline 表 示 页 面 中 的 所 有 链接 在 鼠标 移入 时 显示 下 划 线 。 

第 20~21 行 分 别 定义 了 2 个 通用 类 ， 即 英和 和 代 。 和 是 向 左 浮动 ， 和 位 是 向 右 浮动 ， 其 中 
display:inline 用 于 解决 IE 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <body> 标 签 设置 了 文字 大 小 是 12px， 文 字 颜 色 是 #333， 字 体 是 宋体 。 第 24 行 为 


左 栏 的 村 


# 式 ， 分 别 定义 了 左 栏 的 背景 图 片 、 背 景 颜色 、 宽 度 、 文 字 字 体 。 第 25~27 行 是 网 页 


标志 的 相 


# 式 ， 其 中 第 25 行 是 网 页 标志 最 外 层 容器 <h1> 标 签 的 样式 ， 分 别 定义 了 上 下 外 边 距 为 


25px， 左 右 外 边 距 为 13px， 内 边 距 是 20px， 底 边框 是 1px 宽 、 颜 色 为 的 11 的 实 线 ， 背 景 图 片 是 
head-bg.png， 背 景 颜色 是 #70c8e0， 文 字 大 小 是 42px。 

第 26 行 定义 了 网 站 标志 中 文字 链接 的 颜色 是 白色 。 第 27 行 定义 了 网 站 标志 中 的 文字 链 
接 ， 在 鼠标 移入 时 颜色 是 白色 ,没有 下 划 线 。 

第 28~30 行 是 网 站 导航 的 样式 ， 第 28 行 是 网 站 导航 最 外 层 容器 的 样式 ， 分 别 定义 了 向 上 
的 外 边 距 是 20px， 上 边框 是 1px 宽 、 颜 色 是 #222 的 实 线 ， 下 边框 是 1px 宽 、 颜 色 是 #090909 的 
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实 线 。 第 29 行 定义 了 list 类 中 <li> 标 签 的 样式 、 如 内 边 距 、 上 边框 和 下 边框 、 第 30 行 定义 了 导 
航 中 文字 链接 的 样式 ， 如 文字 链接 的 颜色 和 文字 大 小 。 

第 31~33 行 是 右 栏 的 样式 。 第 31 行 是 右 栏 最 外 层 容 器 的 样式 ， 分 别 定 义 了 外 边 距 和 内 边 
距 。 
右 栏 最 外 层 容 器 的 左 外 边 距 是 260px， 由 于 左 栏 向 左 浮动 ， 右 栏 自 适 应 宽度 ， 因 此 ， 右 栏 
> 的 margin-left 是 左 栏 的 宽度 ， 但 是 由 于 左右 两 栏 有 20px 的 间隙 ， 因 此 右 栏 的 margin-left 是 

240px+20px=260px。 

第 32 行 是 右 栏 中 <h2> 标 签 的 样式 ， 分 别 定 义 了 文字 大 小 和 外 边 距 。 右 栏 中 的 创作 背景 模 
块 和 内 容 简介 模块 的 标题 都 是 由 <h2> 标 签 包含 相应 的 标题 文字 组 成 的 。 

第 33 行 是 右 栏 中 段落 标签 <p> 的 样式 ， 分 别 定义 了 行 高 为 30px， 文 字 大 小 为 14px， 首 行 
向 右 缩 进 2em， 向 下 的 外 边 距 是 20px。 


6.4 小 结 


本 章 主要 讲解 了 一 栏 宽度 固定 ， 另 一 栏 宽度 自 适 应 的 网 页 制作 方法 ， 其 中 主要 介绍 了 两 
种 方法 实现 这 种 布局 ， 分 别 是 : 

@ 一 栏 浮动 ， 另 一 栏 默 认 文 档 流 并 设置 向 左 外 边 距 。 

e 一 栏 绝对 定位 ， 另 一 栏 默 认 文 档 流 并 设置 向 左 外 边 距 。 

两 种 方法 各 有 优 劣 ， 读 者 可 以 根据 实际 项 目 需要 灵活 使 用 。 

最 后 通过 一 个 简单 的 案例 ， 进 一 步 讲解 了 如 何 对 这 类 页 面 进行 网 页 布局 ， 加 深 了 对 本 章 
介绍 方法 的 理解 和 掌握 。 
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本 章 将 主要 介绍 三 栏 宽 度 固定 的 网 页 布局 ， 这 种 布局 方式 是 网 站 中 
常见 的 布局 方式 之 一 。 在 内 容 比 较 多 的 大 型 门户 网 站 或 购物 网 站 上 ， 经 
常 能 看 到 这 种 布局 方式 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


@ 页 面 布局 的 分 析 : 了 解 三 栏 宽度 固定 的 布局 ， 并 对 这 种 布局 
方式 进行 分 析 。 

e@ 页 面 布局 的 实现 : 介绍 了 3 种 实现 方法 ， 可 在 实际 项 目 中 根据 
情况 灵活 运用 。 

e@ 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

@ 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


6.1 页面 布局 的 分 析 


本 节 将 展示 三 栏 宽度 固定 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 这 种 布局 进行 分 析 。 


6.1.1 示意 图 
宽 


三 栏 宽度 固定 的 页 面 在 浏览 器 中 的 布局 如 图 6.1 所 示 。 
左 栏 中 间 栏 右 栏 
网 页 宽度 
Eo 屏 东突 度 一 | 


妈 6.1 三 栏 宽度 固定 的 页 面 在 浏览 嚣 中 的 布局 示意 
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6.1.2 布局 分 析 


在 三 栏 宽度 固定 的 布局 中 ， 页 面 总 宽度 固定 ， 左 栏 、 中 间 栏 和 右 栏 的 宽度 都 固定 。 
如 图 6.1 所 示 ， 左 栏 通常 也 称 为 侧 栏 ， 主 要 显示 子 导航 或 网 站 某 些 模块 的 内 容 ， 中 间 栏 通常 
也 称 为 主要 内 容 ， 主 要 显示 网 页 的 重要 内 容 ;， 右 栏 是 另 一 个 侧 栏 ， 主 要 显示 网 站 中 一 些 不 太 生 


要 但 是 和 主要 内 容 相关 的 模块 。 当 网 页 中 需要 展示 的 内 容 较 多 时 ， 通 常 采用 这 种 布局 方式 。 


邮 


三 栏 宽度 固定 的 布局 在 网 页 制作 中 
到 了 浮动 和 定位 的 知识 。 


6.2.1 左 中 右 三 栏 浮动 


左 中 右 三 栏 浮动 是 指 左 栏 、 中 间 栏 和 右 栏 向 左 或 向 右 浮动 ， 并 设置 宽度 。 
编写 XHTML 代 码 如 下 。 


代码 6-1 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 三 栏 宽度 固定 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 


车 


常见 ， 这 种 布局 的 实现 经 常用 到 二 种 方法 ， 主 要 用 


07 </head> 

08 <body> 

09 <xdiv id="doc" class="cf"> 

10 <div class="side f1"> 左 栏 </div> 
EE <div class="main f1"> 中 间 栏 </div> 
he <div class="right f1"> 右 栏 </div> 
13 </div> 

14 </body> 


15 </html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03-~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 15 行 
是 页 面 的 html 标 签 。 第 08 行 和 第 14 行 是 页 面 的 body 标 签 。 第 09 行 和 第 13 行 是 页 面 最 外 层 容 器 
#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 .side， 第 11 行 是 中 间 栏 .main， 第 12 行 是 
右 栏 .right。 在 左 栏 、 中 间 栏 和 右 栏 上 还 有 样式 及， 用 于 使 各 栏 向 左 浮动 。 

根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 
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代码 6-2 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

02 .cflzoom:17} 

03 .fl{ffloat:left;display:inline;} 

04 body{background:#ddd;} 

05 #doc{width:300px;font-family: "微软 雅 黑 "; font-size:18px; color:#fff;} 

06 .side{width:100px;background:red;height:100px; } 

07 .main{ width:100px;background:orange;height:100px; } 

08 .right{ width:100px;background:green;height:100px; } 


第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮 动容 器 的 高 度 变化 时 ， 外 
层 容器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .全 类 ， 通 过 float:left 设 置 了 向 左 浮动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 
第 04 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 ，body 标 签 的 宽度 和 高 度 也 等 于 浏览 器 显 
示 区 域 的 宽度 和 高 度 。 第 05 行 是 网 页 最 外 层 容器 #doc 的 样式 ， 设 置 了 宽度 为 300px， 字 体 是 
微软 雅 黑 ， 文 字 大 小 是 18px， 文 字 颜色 是 白色 。 第 06 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 
为 100px， 背 景 颜 色 是 红色 ， 高 度 是 100px。 第 07 行 是 中 间 栏 容器 .main 的 样式 ， 设 置 了 宽度 
为 100px， 背 景 颜色 是 桔 色 ， 高 度 是 100px。 第 08 行 是 右 栏 容器 .right 的 样式 ， 设 置 了 宽度 是 
100px， 背 景 颜色 是 绿色 ， 高 度 是 100px。 

通过 CSS 样 式 中 对 #doc、.side 和 .main 的 宽度 设置 可 以 看 出 ， 最 外 层 容 器 的 宽度 是 左 栏 、 
中 间 栏 和 右 栏 容器 宽度 的 总 和 。 

在 浏览 器 中 的 显示 效果 如 图 6.2 所 示 。 


#doc 


| 屏幕 宽度 | 


图 6.2 在 浏览 器 中 的 显示 效果 


6.2.2 左 中 右 三 栏 绝对 定位 


左 中 右 三 栏 绝 对 定位 是 指 左 栏 、 中 间 栏 和 右 栏 分 别 设置 为 绝对 定位 ， 最 外 层 容器 设置 成 相 
对 定位 。 其 中 ， 中 间 栏 如 果 以 left 进 行 定位 ， 则 位 置 取决 于 左 栏 的 宽度 ， 如 果 以 right 进 行 定位 ， 
则 取决 于 右 栏 的 宽度 。 

编写 XHTML 代码 如 下 。 


代码 6-3 


01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
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04 <meta charset="utf-8"> 

05 <title> 三 栏 宽度 固定 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 

07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div class="side poa"> 左 栏 </div> 

<div class="main poa"> 中 间 栏 </div> 

2 <div class="right poa"> 右 栏 </div> 

13 </diy> 

14 </body> 

15 </html> 

在 代码 6-3 的 XHTML 结构 中 ， 左 栏 最 外 层 容器 的 类 是 side 和 poa， 中 间 栏 最 外 层 容器 的 类 
是 main 和 poa， 右 栏 最 外 层 容器 的 类 是 right 和 poa， 并 且 用 id 为 doc 的 <div> 标 签 包含 左 栏 、 中 间 
栏 和 右 栏 。 

根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 


代码 6-4 


01 body{background:#ddd;} 
02 #doc{width:300px;height:100px;position:relative; 
font-family: "微软 雅 黑 "; font-size:18px; color:#fff;} 

03 .poa{position:absolute;} 

04 .side{width:100px;height:100px;background:red;top:0px;left:0px;} 

05 .main{ width:100px;height:100px;background:orange; top:0px;left:100px;} 

06 .right{ width:100px; height:100px;background:green; top:0px;right:0px;} 

第 01 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 。 第 02 行 是 网 页 最 外 层 容器 #doc 的 样 
式 ， 设 置 了 宽度 为 300px， 高 度 是 100px， 相 对 定位 ， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 
字 颜 色 是 白色 。 第 03 行 定义 的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容 
器 都 会 相对 父 容器 进行 绝对 定位 。 第 04 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 高 度 
为 100px， 背 景 颜色 是 红色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容器 左边 缘 0px。 第 05 行 是 中 间 
栏 容 器 .main 的 样式 ， 设 置 了 宽度 为 100px， 高 度 为 100px， 背 景 颜色 是 桔 色 ， 距 离 父 容器 上 边 
缘 0px， 距 离 父 容器 左边 缘 100px。 第 06 行 是 右 栏 容 器 ,right 的 样式 ， 设 置 了 宽度 为 100px， 高 
度 为 100px， 背 景 颜色 是 绿色 ， 距 离 父 容器 上 边缘 0px， 距 离 父 容器 右边 缘 0px。 

与 第 6.2.1 小 节 中 介绍 的 方法 一 样 ， 最 外 层 容器 的 宽度 是 左 栏 、 中 间 栏 和 右 栏 容器 宽度 的 
总 和 。 

在 浏览 器 中 的 显示 效果 与 图 6.2 相 同 。 


6.2.3 左右 两 栏 浮动 ， 中 间 栏 绝对 定位 


左右 两 栏 浮动 ， 中 间 栏 绝对 定位 是 指 左右 两 栏 向 左 或 向 右 浮动 ， 并 且 设 置 宽度 ， 中 间 栏 设置 
成 绝对 定位 ， 并 设置 宽度 。 其 中 ， 中 间 栏 如 果 以 left 进 行 定位 ， 则 位 置 取决 于 左 栏 的 宽度 ， 如 果 以 
Tight 进 行 定位 ， 则 取决 于 右 栏 的 宽度 。 

编写 XHTML 代 码 如 下 。 
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代码 6-5 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 三 栏 宽度 固定 </title> 

06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div class="side f1"> 左 栏 </div> 

EE <div class="main poa"> 中 间 栏 </div> 
12 <div class="right fr"> 右 栏 </div> 
13 </div> 

14 </body> 

15 </html> 


在 代码 6-5 的 XHTML 结 构 中 ， 左 栏 最 外 层 容 器 的 类 是 side 和 fi， 中 间 栏 最 外 
main 和 poa， 右 栏 最 外 层 容器 的 类 是 right 和 位， 并 且 用 id 为 doc 的 <div> 标 签 包含 
和 右 栏 。 

根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 


代码 6-6 


01 body{background:#ddd;} 

02 #doc{width:300px;height:100px;position:relative; 
font-family:" 微 软 雅 黑 "; font-size:18px;color:#fff;} 

03 .fl{float:left;display:inline;} 

04 .fr{float:right;display:inline;} 

05 .poa{position:absolute;} 

06 .side{width:100px;height:100px;background:red; } 


层 容器 的 类 是 
左 栏 、 中 间 栏 


07 .main{ width:100px;height:100px;background:orange; top:0px;left:]100px;} 


08 .right{ width:100px; height:100px;background:green; } 


第 01 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 。 第 02 行 是 网 页 最 外 层 容器 #doc 的 样 
式 ， 设 置 了 宽度 为 300px， 高 度 是 100px， 相 对 定位 ， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 
字 颜 色 是 白色 。 第 03 行 定义 的 1 类， 通过 float:left 设 置 了 向 左 浮动 ， 并 通过 display:inline 解 决 了 
IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 下 6 的 双边 距 bug。 第 04 行 定义 的 .各 类 ， 通 
过 floatright 设 置 了 向 右 浮动 ， 并 通过 display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 。 第 05 行 定义 


的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容器 都 会 相对 父 容 
位 。 第 06 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 高 度 为 100px， 背 景 颜 


器 进行 绝对 定 
色 是 红色 。 第 


07 行 是 中 间 栏 容器 :main 的 样式 ， 设 置 了 宽度 为 100px， 高 度 为 100px， 背 景 颜色 是 桔 色 ， 距 离 
父 容器 上 边缘 0px， 距 离 父 容器 左边 缘 100px。 第 08 行 是 右 栏 容器 right 的 样式 ， 设 置 了 宽度 为 


100px， 高 度 为 100px， 背 景 颜色 是 绿色 。 
在 浏览 器 中 的 显示 效果 与 图 6.2 相 同 。 
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6.3 ”网 页 实例 


前 面 分 析 了 三 栏 宽 度 固定 的 网 页 布局 并 介绍 了 实现 方法 ， 本 节 将 以 一 个 实际 的 页 面 为 
例 ， 详 细 介绍 这 种 布局 的 页 面 制作 方法 。 


6.3.1 效果 图 分 析 
如 图 6.3 所 示 是 一 个 新 闻 专 题 页 面 “ 新 闻 直 播 ”的 效果 图 。 


新 闻 直 播 


晰 间 ” 财 弛 ”科技 ”汽车 ”教育 寻 育 昼 舌 流 洲 过 乐 ” 鲁 语 房产 博 富 亲子 论坛 数 吗 浙 戏 应用 


高 速 突 降 大 扫 注 意 出 行 安全 


读 自 : 尘 夏 时 总站 2014-05-07 10:36:5e 


停 守 看 似 向 单 ， 其 天 大 有 技巧， 谁 听 认 知 
放 ! 所 人 一任， 要 凡人 
的 得失 Ai 横 控 社 点 和 民 标 ， 在 源 省 ， 存 科 韦 ， 
RE 着 必 5 日 电 《 记 下 袖 ) 记 省 5198 从 曙 龙 工 省 将 总队 去 


村 太 队 获 生 ， 殉 地 区 小 气候 唱 ， 叶 外 让 于 村 月 江 训 速 公 小 点 好好 富 秽 日 元 于 大生 ， 
一 入 这 成 交通 捐 才 。 交 密 部 门 本 旬 穴 器 员 ， 一 二 要 主意 出 行 安全 ， 黎 避 地 区 小 气 疏 外 
ES 


掺 了 邮 ， 这 声 大 亚 从 < 日 早 民明 大 右 开始 落下 ， 持 综 时 站 4 长 ， 堆 至 记者 发 下 
未 为 | 两。 鸣 性 大 B 负 两 人 介绍 ， 
加 其 来 的 大 要 对 于 襄 注 生 车 洁 成 了 较 大 


淡 是 一 种 外 现象 。 旨 甩 的 火星 人 类 的 骨 。。 因 大 雪 必 和 交通 事 坟 ， 车 锦 通行 虽然 租 民 但 示 业 现 大 而 积 拉 直 现 象 ” 


ee 证 汉 六 等 站 柏 别 吉 广大 基 示 员 ， 在 高夫 中 行 遇 1 一定 要 车 地 区 小 气候 计 行车 
ee pe Ns 去 全 言 央 淖 喇 ,明和 十 从 天气， 敬 强 员 一 定 雪 控 验 橙 示 若 事 履行 ， 并 林 升 应 急 休 。 
火灾 ,就 会 给 人 们 生命 时 产 造 成 巨大 8 失 。 据 

是 计 : 1997 年 拘 忆 共 发 生火 灾 14 万 条 起 ， 伤 亡 7 

千 条 人 ， 而 其 中 丰 8x 的 火灾 是 固 小 态 玩 火 造成 

的 


图 6.3 “新 闻 直播 ”的 效果 


如 图 6.4 所 示 ， 网 页 分 为 头 部 和 主体 内 容 2 个 部 分 。 
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高 速 突 降 大 雪 注 意 出 行 安全 


秃 目 : 华 有 经 汪 凤 2014-05-07 10 39: 红 


集 革 看 似 汪 单 ， 刁 天 大 有 技巧， 证 在 知 
道 ! 玩 仿 车 将 了 也 一 样 ,要 下 为 高 于 必须 热 生 
的 到 的 所作 涯 估 和 六 标 ， 在 亚 放 ,在 科 闪 ， 
在 山路 ， 作 :本 的 Hf 和 第 撞 和 后 应 。 


祝 ) 记 表 5 忆 13 灶 从 黑龙 江 省 交 狗 电 队 高 但 只 

其 于 月 江 高 公路 虎 妖 给 中 愉 s 忆 8 大 二， 
一 记 ， 一定 要 六 名 出行 安 全 ， 芍 惕 地 区 小 所 人 名 
上 


扬 了 前 ， 这 场 大 要 从 5 口号 9 右 开始 务 下 ， 桂 续 时 朋 较 长， 孝 至 记者 发 和 
已 续 加 中 十 。 圈 村 大 队 贡 再 但 绢 ， 进 》5 月 份 ， 几 竹 拓 有 主 辆 拉 下 了 委 地 办， 这 声 
突如其来 的 大雪 对 于 训 二 行车 音 志 了 较 大 区 在 闪 基部 门 请 导 下 ， 大 姑 李 中 扩 开 二 
因 大 看 发 生 六 理事 改 ， 主 畏 通 行 虽然 组 盆 ， 但 未 出 现 大 西 积 邱 直 现象 ~ 
交 才 ] 寺 别提 赔 广 大 党 奖 员 ， 在 豆 速 公 小 行 8f 一 十 要 车 惕 北 区 小 气候 对 行车 
实 全 这 成 8 齐 换 ' 轴 卫 秋天 气 ， 可 驶 员 一 定 要 按 班 提示 威 囊 慢 行 ， 并 打开 应 妃 林 ” 
过 计 ; 1997 二 国共 发 生火 灾 14 万 多 起 ， 刻 记 
二 泌 人 而 其 中 有 8 从 是 国 小玉 于 炎 造 所 
的 


图 6.4 网 页 分 为 头 部 和 主体 内 容 2 个 部 分 


1. 头 部 
头 部 分 为 网 站 标志 和 导航 ， 如 图 6.5 所 示 。 


渐 亲 。 员 经 利 技 汽车 教育 体育 视频 旅游 娱乐 健康 房产 博客 亲子 论 去 的 三 游戏 商用 


图 6.5 网 页 头 部 


导航 


网 站 标志 是 一 张 图 片 和 一 个 文字 链接 ， 这 个 链接 指向 网 站 的 首页 或 主题 页 面 。 


导航 是 一 系列 的 文字 和 链接。 导航 的 背景 颜色 是 灰色 ， 文 字 链 接 的 颜色 是 
显示 。 


2. 主 休 内 容 
体内 容 分 为 左 栏 、 中 间 栏 和 右 栏 ， 如 图 6.6 所 示 是 页 面 的 主体 内 容 。 


HH 


白色 ,字体 加 粗 
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高 速 突 降 大 委 注 意 出 行 安全 


匡 自 : 华 有 乱 纤 本 3014-05-07 10- 4 57 


所 了 诅 。 过 场 大 雪人 5 轨 早 居 ? 灶 万 右 开始 著 下 ， 持 二 时 间 统 长， 各 至 记者 入 时 
已 转 季 上 古 。 号 仁 大 队 贡 责 人 作 经 ， 进 和 5 月份 ， 几 手打 让 柄 元 扫 下 了 下 地 肉 ， 这 场 
究 4p 其 林 的 大 委 对 于 高 还 行车 刘 成 了 于 大 蜡 响 * 下 六 村 部 门 天 导 下 ， 庆 姓 具 路 和 并 二 


火 是 种 四 估 术 旬 -机 用 站 火 是 人 区 类 | | 本 大 雪 友 生 交 浊 可 丰 ， 主 全 生生 玛 纪委 代 ， 介 机 现 大 而 各 押 二 天 多 = 


至 这 来 用 和 活检 直人 灶 的 | | 。 交 黎 部 和 品 和 归 广 大 有 员 。 丰 总 人 小 和 于 一 二 要 则 [小 人 车 


更 和 导 全 直上 。 但 欠 如 时 失去 过 制服 所 本 
安全 这 册 刘 萝 。 天 3 辣 要 天 气 ， 名 员 一定 要 提示 基 开行， 并 打开 应 六 。 
信人 结 人 们 生财 产 党 只 大 |RsE。 所 Set 


绩 计 :1987 年 国共 友 生 大 KR14 万 多 起 ， 念 7 
十 才 人 而 芷 中 有 ?的 炎 庆 是 因 小 革 玩 类 洁 克 
的 


图 6.6 网 页 主体 内 容 


网 页 的 左 栏 ， 包 括 2 个 部 分 。 这 2 个 部 分 的 HTML 结 构 和 CSS 样 式 一 样 ， 因 此 在 书写 HTML 
结构 时 ， 可 以 考虑 用 <ul> 列 表 。 每 个 部 分 分 别 包含 在 一 个 <li> 标 签 中 。 每 个 部 分 都 包含 一 张 
图 片 和 一 段 文 字 摘 要 ， 如 图 6.7 所 示 。 


第 1 


np 


参 人 ， 而 其 中 有 8 允 3 火 灾 是 因 小 孩 玩 火 壬 成 


网 


6.7 左 栏 


中 间 栏 是 新 闻 正 文 内 容 ， 包 括 新 闻 标 题 、 新 闻 来 源 、 新 闻 图 片 和 正文 ， 如 图 6.8 所 示 。 
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请 新 闻 图 片 


新 FE 外 :和 5 月 5 归 电 (记者 泛 社 ) 记者 5 日 188 失 里 龙 江 省 交警 总 愉 高 速 去 队 哈 
| 福 太 队 荣 悉 ， 受 地 区 小 气候 帅 响 ， 哈 尔 放 至 村 月 江 高 要 公路 虎 磋 内 路 段 6 日 突 降 大 委 ， 
一度 洁 成 交通 拥堵 。 交警 部 站 提醒 畦 驶 员 , 一定 要 注意 出 行 安全 ， 寺 惕 地 区 小 气候 危 
害 。 


据 了 解 ， 这 场 大 雪 从 5 日 早 } ， 村 续 时 间 入 长 ,截至 记者 发 稿 时 
已 转 为 小 两 - 响 性 大队 负 责 人 介绍 ” “几乎 所 有 车 辆 都 换 下 了 雪 地 胎 ， 这 场 
| 守 加 其 厅 的 大 在 对 于 高 可 行车 法 成 了 扩大 凡响 。 在 交易 部 门 咏 导 下 ， 虚 赎 赃 路 段 并 未 
| 因 大 要 发 生 交 通 事权 ， 车 辆 遂行 虽然 浅 慢 ,但 未 出 现 大 面 识 拥 示 现象 。 


交警 部 门 杆 别提 醒 广 大 驾驶 员 ， 在 高 带 公 路 行驶 寺 一 定 要 等 惕 地 区 小 气 个 行车 
| 安全 音 所 日 啊 。 遇 到 朋 末 天 亏 ， 合 驶 员 一 定 要 扫 昭 提示 承 藉 慢 行 ， 并 打开 应 妃 灯 * 


图 6.8 中 间 栏 


新 闻 标题 、 新 闻 来 源 和 新 闻 图 片 在 中 间 栏 容器 中 水 平 居 中 显示 ， 正 文 包括 3 段 相 关 文 
字 ， 每 段 文字 之 间 有 一 定 间 距 ， 并 且 每 段 文字 首 行 向 右 缩 进 2 个 汉字 。 

右 栏 包括 热点 新 闻 、 头 条 推荐 和 精彩 博文 ， 共 3 个 模块 ， 如 图 6.9 所 示 。 

热点 新 闻 包 括 标题 和 5 个 文字 链接 。 其 中 ， 标 题 是 “热点 新 闻 ”，5 个 文字 链接 自 上 而 下 
顺序 排列 ， 如 图 6.10 所 示 。 


热点 新 闻 


头条 推荐 


精彩 博文 


文字 
链接 
图 6.9 右 栏 图 6.10 热点 新 闻 


人 DIV+CSSrmskxzmaatd >. .ee 


头条 推荐 包括 标题 和 5 个 文字 和 链接。 其中， 标题 是 “头条 推荐 ”，5 个 文字 链接 自 上 而 下 


顺序 排列 ， 如 图 6.11 所 示 。 


精彩 博文 包括 标题 和 3 个 文字 链接 。 其 中 ， 标 题 是 “精彩 博文 ”，3 个 文字 链接 自 上 而 下 


顺序 排列 ， 如 图 6.12 所 示 。 


图 6.11 头条 推荐 图 6.12 精彩 博文 


6.3.2 切 图 


13 所 示 。 


| 保生 看 似 疝 单 ， 其 实 大 有 技巧 ， 谁 听 堆 知 
道 ! 玩 停车 游戏 也 一 样 ， 要 成 为 高 手 必 须 邹 练 

央 玫 的 操控 键盘 和 限 标 ， 在 弯 道 ， 在 许 坡 ， 
在 山路 ， 作 出 情 确 的 匆 几 和 三 捷 的 反应 * 


高 速 突 降 大 雪 注 意 出 行 安全 


转自 : 雹 要 经 转交 2014-05-07 10.36:52 


| 电 (记者 潘 社 ) 记者 5 日 188d 从 黑龙 江 省 交警 总 队 高 速 支队 哈 


特大 队 获悉 ， 受 地 区 小 气候 及 咯 ， 哈 尔 注 至 导 崩 江 高 速 公路 席 几 内 路段 6 日 突 降 大 雪 ， 


火星 和 自然 旬 。 巴 妥 的 火 是 人 类 的 月 
反 ， 它 给 入 们 带 来 光明 和 漠 巍 ， 推 动 了 人 类 的 


LE 997 年 我 国共 发 生火 究 14 万 条 起 ， 伤 亡 T 
千 多 人 ， 而 其 中 有 8 煌 9 火灾 是 因 人 小 孩 玩 火 洁 成 
的 。 


一 度 造成 交通 拥堵 * 文 警部 门 提醒 驾驶 员 ， 一 定 要 注意 出 行 安全 ， 警 惕 地 区 小 气 俱 危 
害 。 


据 了 解 ， 这 场 太 雪 从 5 日 早晨 6 时 左右 开始 落下 ， 持 续 时 间 较 长 截至 记者 发 稿 时 
已 转 为 小 十 。 喀 杜 太 队 贡 责 人 介绍 ， 进入 5 月 份 ， 几乎 所 有 车 辆 闻 的 下 了 委 地 腑 ， 这 场 
突如其来 的 大 雪 对 于 高 速 行车 造成 了 较 大 曙 咯 。 在 交警 部 门 臣 导 下 ， 虎 妖 崔 路 段 并 未 
因 大 雪 发 生 交通 事 坟 ， 车 辆 通行 虽然 备 慢 ， 但 未 出 现 大 面积 拥堵 现象 * 


交警 部 门 特别 提醒 广大 驾驶 员 ， 在 高 速 公路 行驶 H 一 定 要 警惕 地 区 小 气候 对 行车 
安全 造成 的 风 响 。 旭 到 十 雪 天 气 ， 驾 驶 员 一 定 要 按照 提示 碱 束 慢 行 ， 并 打开 应 急 灯 。 


图 6.13 页 面 在 Photoshop 中 的 切片 


切割 网 页 图 片 包括 bg.jpg、logo.jpg、storyimg4.jpg、storyimg5.jpg、storyimg6.jpg。 其 


如 


h，bg.jpg 是 网 页 背景 图 片 ，logo.jpg 是 网 页 Logo 的 背景 图 片 ，storyimg4.jpg 是 中 间 栏 中 的 新 
闻 图 片 ，storyimg5.jpg 和 storyimg6.jpg 是 左 栏 中 的 图 片 。 
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第 6 章 三 栏 宽度 固定 的 布局 


根据 前 面 对 网 页 效果 图 的 分 析 ， 绘 制 出 了 页 面 大 体 的 框架 图 ， 如 图 6.14 所 示 。 


从 上 到 下 按 顺 序 显示 。 框 架 图 上 


都 有 固定 的 宽度 。 


6.3.4 编写 XHTML 代码 


前 面 分 析 了 网 页 效果 图 ， 并 在 第 6.3.3 小 节 上 


图 6.14 页 面 框架 
网 页 的 头 部 和 主体 内 容 在 整个 框架 图 中 从 上 而 下 按 顺 序 排列 ， 这 2 部 分 在 浏览 器 中 也 是 


h 的 左 栏 对 应 页 面 效 果 图 中 的 左 栏 ， 
面 效果 图 中 的 中 间 栏 ， 框 架 图 中 的 右 栏 对 应 页 面 效 果 图 中 的 右 栏 。 
在 CSS 布 局 上 ， 左 栏 向 左 浮动 ， 中 间 栏 向 左 浮动 ， 右 栏 向 右 浮动 。 左 栏 、 中 间 栏 和 右 栏 


P 画 出 了 页 面 大 体 的 框架 图 ， 


框架 图 中 的 中 间 栏 对 应 页 


编写 网 页 的 


XHTML 代码 如 下 。 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 新 闻 直 播 </title> 
06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 
08 <body> 
09 <div id="doc"> 
10 <hl><a href="index.html"> 新 闻 直 播 </a></h1> 
hi <div class="menu"> 
12 <ul> 
13 <1i><a href="#"> 新 闻 </a></1i> 
14 <li><a href="#"> 财 经 </a></1i> 
3 <1i><a href="#"> 科 技 </a></1i> 
16 <1i><a href="#"> 汽 车 </a></1i> 
汪汪 <1i><a href="#"> 教 育 </a></1i> 
| <li><a href="#"> 体 育 </a></1i> 
19 <1i><a href="#"> 视 频 </a></1i> 
20 <1i><a href="#"> 旅 游 </a></1i> 
2 <li><a href="#"> 娱 乐 </a></1i> 
22 <1i><a href="#"> 健 康 </a></1i> 
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2 <li><a href="#"> 房 产 </a></1i> 
24 <li><a href="#"> 博 客 </a></1i> 
25 <li><a href="#"> 亲 子 </a></1i> 
26 <1i><a href="#"> 论 坛 </a></1i> 
2 <li><a href="#"> 数 码 </a></1i> 
28 <li><a href="#"> 游 戏 </a></1i> 
29 <1i><a href="#"> 应 用 </a></1i> 
30 </ul> 
Eh </div> 
32 <div id="bd" class="cf"> 
33 <div class="side fl"> 
34 <ul> 
35 < 
36 <a href="#"><img src="images/storyimg5.jpg" /></a> 
2 <p> 停 车 看 似 简 单 …… 精 确 的 判断 和 敏捷 的 反应 。</p> 
38 </1i> 
39 <1i> 
40 <a href="#"><img src="images/storyimg6.jpg" /></a> 
41 <p> 火 是 一 种 自然 现象 …… 因 小 孩 玩 火 造成 的 。</p> 
42 </1i> 
43 </ul> 
44 </div> 
45 <div class="main fl"> 
46 <h2> 高 速 突 降 大 雪 注 意 出 行 安 全 </h2> 
47 <div class="from"> 转 自 : 华夏 经 纬 网 
2014-05-07 10:38:52</div> 
48 <div class="headlineimage"><a href="#"> 


<img class="thumbnail"src="images/storyimg4.jpg" 
title="snow" alt="snow"/></a></div> 


49 <p> 新 华 网 哈尔滨 5 月 5 日 电 …… 警 惕 地 区 小 气候 危害 。 </p> 

50 <p> 据 了 解 …… 但 未 出 现 大 面积 拥堵 现象 。</p> 

51 <p> 交 警部 门 特别 提醒 广大 驾驶 员 …… 并 打开 应 急 灯 。</p> 

亲王 </div> 

53 <div class="right fr"> 

54 <div class="link"> 

55 <h3> 热 点 新 闻 </h3> 

56 <ul> 

57 <1i><a href="#"> 探 宝 云 南 奇 珍 野生 菌 </a></1i> 

58 <1i><a href="#"> 北 海 美食 攻略 
满口 鲜 香 吃 得 痛快 </a></1i> 

59 <1i><a href="#"> 十 一 多 国 签证 新 规 : 美国 免 面 谈 
英国 速 签 </a></1i> 

60 <1i><a href="#"> 香 港 购物 商场 大 全 </a></1i> 

61 <1i><a href="#"> 人 台湾 旅游 购物 指南 宝典 
</a></1i> 

62 </ul> 

63 </div> 

64 <div class="link"> 

65 <h3> 头 条 推荐 </h3> 

66 <ul> 

67 <1i><a href="#"> 内 蒙古 元 上 都: 
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拥抱 着 巨大 文明 的 废墟 </a></1Li> 

68 <1i><a href="#"> 完 美 凤凰 游 
八大 浪漫 事 与 十 大 省 钱 攻 略 </a></1i> 

69 <1i><a href="#"> 北 京 十 大 绝对 好 吃 的 隐秘 餐厅 
</a></1i> 

70 <1i><a href="#"> 太 行 绝 壁 探 险 郭 亮 自驾 游 发 
现 新 河南 </a></1i> 

TL <1i><a href="#"> 最 经 典 颐 和 园 旅游 攻略 
</a></1i> 

2 </ul> 

了 </div> 

74 <div class="link"> 

75 <h3> 精 彩 博文 </h3> 

76 <ul> 

7 <1i><a href="#"> 越 南 私 底下 归还 中 国 领土 
</a></1i> 

78 <1i><a href="#"> 珍 宝 岛 之 战 中 国 惨 胜 真相 
</a></1i> 

79 <1i><a href="#"> 中 俄 首次 在 钓鱼 岛 联合 军 演 
</a></1i> 

80 </ul> 

81 </div> 

82 </div> 

83 </div> 

84 </div> 

85 </body> 

86 </html> 


第 01 行 是 网 页 的 <!IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必 须 是 HTML 文档 的 第 一 行 ， 位 
于 <html> 标签 之 前 。 第 02 行 和 第 86 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTML 文档 。 

第 03~07 行 是 HTML 文 档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 的 元 
素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 

第 04 行 用 <meta> 标 签 定义 网 页 的 编码 方式 是 utf8。 第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 
引用 的 样式 文件 地 址 。 

第 08~85 行 是 网 页 主体 。 第 08 行 和 第 85 行 是 <body> 标 签 ，<body> 标 签 用 于 定义 HIMIL 文 
档 的 主体 。 第 09~84 行 是 网 页 中 所 有 的 内 容 。 第 09 行 和 第 84 行 是 网 页 最 外 层 容器 ，id 是 doc， 
包含 了 网 页 中 显示 的 所 有 内 容 。 

第 10-~31 行 是 网 页 头 部 。 第 10 行 是 网 站 标志 ， 由 <h1> 标 签 包含 带 有 链接 的 文字 组 成 。 其 
中 ，“ 新 闻 直 播 ” 是 在 网 页 中 显示 标志 的 文字 部 分 ，<a> 标 签 中 的 href 指 向 网 站 首页 。 

第 11~31 行 是 网 站 导航 。 第 11 行 和 第 31 行 是 导航 的 最 外 层 容 器 。CSS 的 类 名 是 menu。 第 
12~30 行 是 导航 的 主体 内 容 。 网 站 导航 有 17 个 文字 链接 ， 因 此 ， 在 HTML 结 构 上 ， 由 <ul> 标 签 
包含 17 个 <li> 标 签 组 成 。 每 个 <li> 标 签 中 都 包含 文字 链接 ， 每 个 文字 链接 由 <a> 标 签 包含 相关 
文字 组 成 。 

第 32~83 行 是 网 页 的 主体 内 容 。 第 32 行 和 第 82 行 是 主体 内 容 的 最 外 层 容器 ，id 是 bd。CSS 
的 类 名 是 cf。 由 于 #bd 容 器 包含 的 左 栏 、 中 间 栏 和 右 栏 都 向 左 或 向 右 浮动 ， 因 此 ， 在 #bd 容 器 
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上 增加 类 cf， 使 该 容器 能 包含 里 面 的 3 栏 内 容 。 

第 33~44 行 是 左 栏 。 第 33 行 和 第 44 行 是 左 栏 最 外 层 容 器 ， 类 名 是 side 和 有 8。 其 中 ， 类 fi 用 于 
使 左 栏 向 左 浮动 。 第 35~38 行 是 左 栏 图 片 新 闻 的 第 一 部 分 ， 由 <li> 标 签 充当 了 这 部 分 的 最 外 层 
容器 。 第 36 行 是 图 片 ， 图 片 部 分 由 <a> 标 签 包 含 <img> 标 签 组 成 。 第 37 行 是 摘要 ， 由 <p> 标 签 
包含 相关 文字 组 成 。 

第 39~42 行 是 左 栏 图 片 新 闻 的 第 二 部 分 ， 与 第 一 部 分 的 HTML 结 构 和 CSS 样 式 完全 相同 。 
第 34 行 和 第 43 行 是 包含 左 栏 图 片 新 闻 的 最 外 层 容 器 <ul>。 

第 45~52 行 是 中 间 栏 。 第 45 行 和 第 52 行 是 中 间 栏 的 最 外 层 容 器 ， 类 名 是 main 和 也 。 其 中 ， 
且 用 于 将 中 间 栏 向 左 浮动 。 

第 46 行 是 中 间 栏 的 新 闻 标 题 ， 由 <h2> 标 签 包含 标题 文字 组 成 。 第 47 行 是 新 闻 来 源 ， 用 
<div> 标 签 包含 来 源 和 发 布 时 间 ， 其 中 ，<div> 上 的 类 名 是 from。 第 48 行 是 新 闻 图 片 ， 使 用 了 
<img> 标 签 ， 该 标签 上 除了 src 用 于 引用 图 片 地 址 外 ， 还 有 alt 和 title。 其 中 ，alt 的 作用 是 当 图 片 
不 存在 时 ， 蔡 换 图 片 显示 alt 中 的 文字 。title 是 图 片 标题 ， 作 用 是 当 鼠 标 移 到 图 片上 时 显示 title 
中 的 文字 。alt 和 title 可 以 添加 ， 也 可 以 不 添加 ， 不 添加 不 会 影响 网 页 的 显示 ， 添 加 上 则 提高 
了 用 户 体验 。 

第 49~51 行 是 新 闻 正 文 ， 共 3 段 文字 ， 因 此 用 3 个 <p> 标 签 包含 相关 文字 。 

第 53~82 行 是 右 栏 。 第 53 行 和 第 82 行 是 最 外 层 容器 ， 类 名 是 right 和 他。 其 中 ， 企 用 于 将 
右 栏 向 右 浮动 。 第 54~63 行 是 热点 新 闻 。 第 54 行 和 第 63 行 是 热点 新 闻 的 最 外 层 容 器 ， 类 名 是 
link。 

第 55 行 是 热点 新 闻 的 标题 ， 由 <h3> 标 签 包含 “热点 新 闻 ” 组 成 。 第 56~62 行 是 热点 新 闻 
列表 ， 有 5 条 新 闻 ， 鼠 标 单 击 新 闻 链 接 时 跳 转 到 新 闻 详细 页 面 ， 因 此 ， 由 <ul> 标 签 包含 5 个 
<li> 标 签 组 成 列表 ， 每 个 <li> 中 包含 <a> 标 签 用 于 页 面 跳 伟 ，<a> 中 包含 相关 的 新 闻 标 题 。 

第 64~73 行 是 头条 推荐 。 第 74~81 行 是 精彩 博文 。 头 条 推荐 和 精彩 博文 的 HTML 结 构 完全 
相同 ， 不 再 发 述 。 


6.3.5 编写 CSS 代 码 
根据 对 网 页 效果 图 和 XHTML 代 码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 : 


01 /*css reset*/ 

02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 

03 table{border-collapse:collapse; border-spacing:0;} 

04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 a{text-decoration:none;} 


09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:'"';} 

11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 
13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 
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15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 


clear:both;height:0;} 
LO CEIZOom 1 
17 /*global css*/ 
18 a{color:#333;text-decoration:none;} 


19 a:hover{color:#A32626;text-decoration:underline;} 


20 .fl{ffloat:left;display:inline;} 
21 .fr{float:right;display:inline;} 


22 body{font-size:12px;color:#333;font-family:" 宋 体 ",，Arial, Verdana, 
Geneva, Helvetica, sans-serif;background:url(../images/bg.jpg) 


repeat left top;} 


23 hl{font-weight:bold;font-family: "微软 雅 黑 ' ; font-size: 30px;padding:30px 0 20px 
130px;background:url(../images/logo.jpg) no-repeat left center;} 


24 hl a{color:#A32626;} 
25 hl a:hover{color:#000;} 


26 h2{font-size:24px;text-align:center;margin:0 0 lO0px 0;} 


27 p{text-indent:2em;} 
28 /*module css*/ 


29 #doc{width:940px;margin:0 auto;margin-top:10px; 


margin-bottom:10px;background:#fff; 
30 #bd{padding:20px 0 0;} 
31 .side{width:270px;} 
32 .main{width:450px;padding:0 10px;} 


line-height:24px;} 


33 .from{text-align:center;color:#666;padding:0 0 10px 0;} 


34 .main p{margin:0 0 18px 0;} 


35 .main img{display:block;margin:10px auto;} 


36 .right{width:200px;background:#b0b0b0; 
37 .right h3{padding:10px 1l0px Spx;} 


} 


38 .right li{padding:0 l0px;height:30px;line-height:30px;overflow:hidden;} 


39 .side ul{border-right:lpx solid #ddd;} 
40 .side ul li{padding:0 10px 20px;} 


41 .menu{font-weight:bold;width:940px;height:30px; 
line-height:30px;background:#b0b0b0;font-family: "微软 雅 黑 ";} 

42 .menu ul{margin:0 0 0 50px;overflow:hidden;} 

43 .menu li{float:left;display:inline;margin:0 1l0px;} 


44 .menu a{font-size:14px;color:#fff;} 


CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 重 置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 


重 置 样式 ， 第 17~27 行 是 公共 样式 ， 第 28~44 行 是 模块 样式 。 通 过 CSS 


置 代码 ， 对 相关 元 素 


的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 


ee he 通过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 重复 应 用 
， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 
第 01~16 行 的 详细 讲解 ， 请 参考 第 2 章 。 后 面 每 一 章 的 CS 


入 


置 代码 都 是 相 


在 不 同 的 模块 


同 的 ， 在 制作 


一 个 新 网 页 时 ， 可 以 先 把 这 部 分 CSS 样 式 拷贝 到 新 页 
的 公共 样式 和 各 个 模块 的 样式 。 


四 


的 CSS 样 式 表 中 ， 再 开始 编写 新 页 面 


第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设置 了 颜色 、 下 划 线 是 否 显示 。 其 中 第 
18 行 中 的 text-decoration:none 表 示 页 面 中 的 所 有 链接 在 普通 状态 下 不 显示 下 划 
text-decoration:underline 表 示 页 面 中 的 所 有 链接 在 鼠标 移入 时 显示 下 划 线 。 


线 ， 第 19 行 的 
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第 20~21 行 分 别 定义 了 2 个 通用 类 ， 即 所 和 在。 了 是 向 左 浮动 ， 企 是 向 右 浮 动 ， 其 中 
display:inline 用 于 解决 下 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <body> 标 签 设 置 了 文字 大 小 是 12px， 文 字 颜 色 是 妆 33， 字 体 是 宋体 ， 背 景 图 片 
bgjpg 在 整个 body 中 水 平和 垂直 方向 平 铺 。 

第 23 行 是 <h1> 标 签 的 样式 ，<hl> 标 签 的 样式 中 分 别 定义 了 文字 加 粗 、 字 体 是 微软 雅 黑 、 
文字 大 小 是 30px、 内 边 距 以 及 标志 背景 图 片 logo.jpg。 

第 24~25 行 是 标志 中 文字 链接 的 样式 ， 定 义 了 链接 的 颜色 。 第 26 行 是 <h2> 标 签 的 样式 ， 
中 间 栏 的 新 闻 标 题 由 <h2> 标 签 包含 文字 组 成 ， 因 此 这 里 实际 上 是 中 间 栏 新 闻 标 题 的 样式 。 

第 27 行 定义 了 网 页 中 所 有 <p> 标 签 的 样式 ， 即 网 页 中 所 有 文字 段落 向 右 缩 进 2 个 汉字 。 第 
29 行 是 网 页 最 外 层 容 器 的 样式 ， 分 别 定义 了 宽度 为 940px、 容 器 水 平 居中 、 向 上 的 外 边 距 是 
10px、 向 下 的 外 边 距 是 10px、 背 景 颜色 是 和 白色 、 行 高 是 24px。 

第 30 行 是 主体 内 容 的 最 外 层 容器 的 样式 ， 定 义 了 容器 的 内 边 距 。 第 31 行 是 左 栏 的 样式 
定义 了 宽度 是 270px。 第 32 行 是 中 间 栏 的 样式 ， 定 义 了 宽度 是 450px 和 内 边 距 。 第 33 行 是 中 间 
栏 中 新 闻 来 源 的 样式 ， 定 义 了 .from 中 的 文字 水 平 居 中 ， 颜 色 是 #666， 上 、 右 、 下 、 左 的 内 边 
距 分 别 是 0px、0px、10px、0px。 第 34 行 是 中 间 栏 中 文字 段落 的 样式 ， 定 义 了 外 边 距 。 

第 35 行 是 中 间 栏 中 图 片 的 样式 ， 其 中 display:block 将 <img> 标 签 由 内 联 元 素 转 换 成 块 元 
素 ， 再 通过 margin:10px auto 将 <img> 标 签 的 向 上 外 边 距 设 置 为 10px， 左 右 设置 为 auto， 可 以 使 
已 经 转换 成 块 元 素 的 <img> 标 签 在 父 容器 中 水 平 居中 。 

第 36 行 是 右 栏 的 样式 ， 定 义 了 宽度 是 200px， 背 景 颜色 是 #b0b0b0。 第 37 行 是 右 栏 中 <h3> 
标签 的 样式 。 在 右 栏 中 有 3 个 模块 ， 每 个 模块 都 用 <h3> 标 签 包含 了 模块 的 标题 ，<h3> 标 签 中 
定义 了 内 边 距 。 第 38 行 是 右 栏 中 <li> 标 签 的 样式 ， 分 别 定义 了 内 边 距 、 高 度 、 行 高 、 隐 藏 溢 
出 内 容 。 其 中 ，overflow:hidden 用 于 将 溢出 <l> 标 签 高 度 的 内 容 隐 藏 掉 。 增 加 overflow:hidden 
可 以 防止 由 于 <li> 中 内 容 过 多 造成 的 页 面 布局 变形 的 问题 。 

第 39 行 是 左 栏 中 <ul> 标 签 的 样式 ， 定 义 了 右边 框 是 1px 宽 、 颜 色 是 #ddd 的 实 线 。 第 40 行 是 
左 栏 中 <li> 标 签 的 样式 ， 定 义 了 内 边 距 。 第 41~44 行 是 导航 的 样式 ， 第 41 行 是 导航 最 外 层 容 器 
的 样式 ， 定 义 了 字体 加 粗 、 宽 度 、 高 度 、 行 高 、 背 景 颜色 、 字 体 。 

第 42 行 是 .menu 中 <ul> 标 签 的 样式 ， 定 义 了 外 边 距 。 其 中 overflow:hidden 用 于 使 <ul> 包 
含 浮动 的 <li> 标 签 。 第 43 行 是 .menu 中 <li> 标 签 的 样式 ， 设 置 了 向 左 浮动 和 外 边 距 。 其 中 ， 
display:inline 用 于 解决 IE 6 下 浮动 容器 左右 双边 距 的 问题 。 第 44 行 是 导航 中 文字 链接 的 样式 ， 
定义 了 文字 大 小 和 文字 颜色 。 


6.4 小 结 


本 章 主 要 讲解 了 三 栏 宽度 固定 的 网 页 布局 的 实现 方法 ， 其 中 主要 介绍 了 三 种 方法 来 实现 
这 种 布局 ， 分 别 是 : 


@ 左 中 右 三 栏 浮动 。 
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@ 左 中 右 三 栏 绝对 定位 。 

日 左右 两 栏 浮动 ， 中 间 栏 绝对 定位 。 

三 种 方法 各 有 优 劣 ， 读 者 可 以 根据 实际 项 目 需要 灵活 使 用 。 

最 后 通过 一 个 简单 的 案例 ， 进 一 步 讲解 了 如 何 对 这 类 页 面 进行 网 页 布 
介绍 方法 的 理解 和 掌握 。 


局 ， 加 深 了 对 本 章 
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Q 


了 这 | 左右 两 栏 宽度 固定 ， 
第 7 章 中 间 栏 宽度 自 适应 的 布局 


本 章 将 主要 介绍 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 网 页 布 
局 ， 这 种 布局 方式 是 网 站 中 常见 的 布局 方式 之 一 。 
本 章 主 要 涉及 到 的 知识 点 如 下 。 


e@ 页 面 布 局 的 分 析 : 了 解 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 
适应 的 布局 ， 并 对 这 种 布局 方式 进行 分 析 。 

e 页 面 布 局 的 实现 : 介绍 了 两 种 实现 方法 ， 在 实际 项 目 中 根 
据 情 况 灵活 运用 。 

e 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

@ 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


7.1 页 面 布局 的 分 析 


本 节 将 展示 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 
这 种 布局 进行 分 析 。 


7.1.1 示意 图 


左右 两 栏 宽 度 固 定 ， 中 间 栏 宽度 自 适应 的 页 面 在 浏览 器 中 的 布局 如 图 7.1 所 示 。 


| 
左 栏 中 间 栏 右 栏 | 
| | 
网 页 宽度 
上 屏 术 突 度 一 一 | 
到 7.1 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 页 面 在 浏览 嚣 中 的 布局 示意 


一 第 7 章 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 布局 


7.1.2 布局 分 析 


在 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 布局 中 ， 页 面 总 宽度 固定 或 者 不 固定 ， 左 栏 


和 右 栏 的 宽度 都 固定 ， 中 间 栏 宽度 不 固定 。 页 面 总 宽度 如 果 不 固 定时 ， 会 随 着 浏览 器 或 屏幕 


如 图 7.1 所 示 ， 左 栏 通常 也 称 为 侧 栏 ， 主 要 显示 子 导航 或 网 站 某 些 模块 的 内 容 ， 中 间 栏 通常 


也 称 为 主要 内 容 ， 主 要 显示 网 页 的 重要 内 容 。 右 栏 是 另 一 个 侧 栏 ， 主 要 显示 网 站 中 一 些 不 太 重 


由 


要 但 是 和 主要 内 容 相关 的 模块 。 当 网 页 中 需要 展示 的 内 容 较 多 时 ， 通 常 采用 这 种 布局 方式 。 


7:2 ”页面 布局 的 实现 


左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 布局 在 网 页 制作 中 也 比较 常见 。 这 种 布局 的 实 


现 有 两 种 方法 ， 主 要 用 到 了 浮动 和 定位 的 知识 。 
7.2.1 左右 两 栏 浮动 ， 中 间 栏 默认 文档 流 并 设置 左右 外 边 距 


左 栏 向 左 浮动 ， 并 设置 宽度 ， 右 栏 向 右 浮 动 ， 并 设置 宽度 ， 中 间 栏 是 默认 文档 流 ， 即 
不 设置 浮动 或 定位 ， 设 置 外 边 距 margin， 左 外 边 距 margin-left 的 值 是 左 栏 的 宽度 ， 右 外 边 距 
margin-right 的 值 是 右 栏 的 宽度 。 

编写 XHTML 代码 如 下 。 


代码 7-1 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 左 右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适 应 </title> 


06 <link href="style.css" rel="stylesheet" type="text/css" /> 


07 </head> 

08 <body> 

09 <xdiv id="doc" class="cf"> 

10 <div class="side f1"> 左 栏 </div> 
ny <div class="right fr"> 右 栏 </div> 
i <div class="main"> 中 间 栏 </div> 

3 </aiy> 


14 </body> 
15 </html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03-~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 15 行 


是 页 面 


的 html 标 签 。 第 08 行 和 第 14 行 是 页 面 的 body 标 签 。 第 09 行 和 第 13 行 是 页 面 最 外 层 容器 


#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 ， 样 式 是 .side 和 有， 第 12 行 是 中 间 栏 ， 样 式 
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是 main， 第 11 行 是 右 栏 ， 样 式 是 .right 和 ft。 其 中 ， 类 fl 定义 了 向 左 浮动 ， 类 ft 定义 了 向 右 浮动 。 
根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 


代码 7-2 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

02 *.cf{zoom:1;} 

03 .fl{float:left;display:inline;} 

04 .frf{float:right;display:inline;} 

05 body{background:#ddd;} 

06 #doc{width:300px;font-family: "微软 雅 黑 "; font-size:18px; color:#fff;} 

07 .side{width:100px;background:red;height:100px; margin-right:-3px; } 

08 .main{ background:orange;height:100px;margin:0 150px 0 100px; 

_margin:0 147px 0 97px;} 

09 .right{ width:150px;background:green;height:100px; margin-left:-3px; } 

第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮 动容 器 的 高 度 变 化 时 ， 外 
层 容 器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .所 类 ， 通 过 float:left 设 置 了 向 左 浮动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 
第 04 行 定义 的 . 冬 类 ， 通 过 float'right 设 置 了 向 右 浮 动 ， 并 通过 display:inline 解 决 了 IE 6 下 的 浏览 
器 兼容 问题 。 第 05 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 ，body 标 签 的 宽度 和 高 度 
也 等 于 浏览 器 显示 区 域 的 宽度 和 高 度 。 第 06 行 是 网 页 最 外 层 容器 #doc 的 样式 ， 设 置 了 宽度 为 
300px， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 字 颜 色 是 白色。 第 07 行 是 左 栏 容器 .side 的 样 
式 ， 设 置 了 宽度 为 100px， 背 景 颜 色 是 红色 ， 高 度 是 100px。 第 08 行 是 中 间 栏 容器 .main 的 样 
式 ， 设置 了 背景 颜色 是 桔 色 ， 高 度 是 100px， 向 左 外 边 距 是 100px， 向 右 外 边 距 是 150px。 第 
09 行 是 右 栏 容器 .right 的 样式 ， 设 置 了 宽度 是 150px， 背 景 颜色 是 绿色 ， 高 度 是 100px。 


误 第 07 行 的 “ margin-right:-3pX”、 第 08 行 的 “ margin:0 147px 0 97px” 和 第 09 行 的 “ _ margin- 

> left:-3px” 是 为 了 解决 在 IE 6 下 ， 左 栏 、 右 栏 分 别 和 中 间 栏 产生 的 3px 间 隙 问题 。 为 CSS 样 式 中 
的 属性 前 面 添 加 下 划 线 “_”， 是 解决 正 6 中 bug 的 一 种 CSS Hack 方 法 。 引 起 这 个 问题 的 原因 可 
能 是 IE 6 对 页 面容 器 或 标签 特有 的 泻 染 机 制 。 


通过 CSS 样 式 中 对 .right、.side 和 .main 宽 度 的 设置 可 以 看 出 ， 中 间 栏 的 向 左 外 边 距 是 左 栏 
的 宽度 ， 向 右 外 边 距 是 右 栏 的 宽度 。 
在 浏览 器 中 的 显示 效果 如 图 7.2 所 示 。 


body 
| 屏幕 宽度 | 


图 7.2 在 浏览 器 中 的 显示 效果 
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这 这 


左右 两 栏 绝对 定位 ， 中 间 栏 默认 文档 流 并 设置 左右 外 边 距 


左 栏 和 右 栏 都 是 绝对 定位 ， 并 设置 宽度 ， 中 间 栏 是 默认 文档 流 ， 即 不 设置 浮动 或 定位 ， 
设置 外 边 距 margin， 左 外 边 距 margin-left 的 值 是 左 栏 的 宽度 ， 右 外 边 距 margin-right 的 值 是 右 栏 


的 宽度 。 
编写 XHTML 的 代码 如 下 。 
代码 7-3 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 左 右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 </title> 
06 <link href="style.css" rel="stylesheet" type="text/css" /> 
07 </head> 
08 <body> 
09 <xdiv id="doc" class="cf"> 
10 <div class="side poa"> 左 栏 </div> 
上 <div class="main"> 中 间 栏 </div> 
12 <div class="right poa"> 右 栏 </div> 
13 </div> 
14 </body> 
15 </html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 15 行 
是 页 面 的 html 标 签 。 第 08 行 和 第 14 行 是 页 面 的 body 标 签 。 第 09 行 和 第 13 行 是 页 面 最 外 层 容器 
#doc， 这 个 容器 用 于 显示 网 页 的 内 容 。 第 10 行 是 左 栏 ， 样 式 是 .side 和 poa， 第 11 行 是 中 间 栏 ， 
样式 是 .main， 第 12 行 是 右 栏 ， 样 式 是 .right 和 poa。 其 中 ， 类 poa 是 一 个 通用 类 ， 应 用 该 类 的 


根 和 
代 而 
01 


02 
03 


04 
05 
06 


居 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 
37-4 


.poa{position:absolute;} 

body{background:#ddd; } 

#doc{width:300px;font-family: "微软 雅 黑 "; font-size:18px; 

color:#fff; position:relative;} 
.side{width:100px;background:red;height:100px;top:0px;left:0px; } 
.main{ background:orange;height:100px;margin:0 150px 0 100px;} 

-right{ width:150px;background:green;height:100px;top:0px;right:0px; } 


第 01 行 定义 的 .poa 类 ， 通 过 position:absolute 设 置 为 绝对 定位 ， 应 用 该 类 的 容器 都 会 相对 


第 02 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 背景 颜色 ，body 标 签 的 宽度 和 高 度 也 等 于 浏览 
器 显示 区 域 的 宽度 和 高 度 。 
第 03 行 是 网 页 最 外 层 容 器 #doc 的 样式 ， 设 置 了 宽度 为 300px， 字 体 是 微软 雅 黑 ， 文 字 大 小 


是 18px， 


文字 颜色 是 白色 ， 相 对 定位 。 
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第 04 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 背 景 颜色 是 红色 ， 高 度 是 100px， 
距离 父 容器 上 边缘 0px， 焉 高 父 容器 左边 缘 0px。 

第 05 行 是 中 间 栏 容器 .main 的 样式 ， 设 置 了 背景 颜色 是 桔 色 ， 高 度 是 100px， 向 左 外 边 距 
是 100px， 向 右 外 边 距 是 150px。 

第 06 行 是 右 栏 容 器 .right 的 样式 ， 设 置 了 宽度 是 130px， 背 景 颜色 是 绿色 ， 高 度 是 100px， 
距离 父 容器 上 边缘 0px， 距 离 父 容器 右边 缘 0px。 

与 第 7.2.1 小 节 中 介绍 的 方法 相同 ， 中 间 栏 的 向 左 外 边 距 是 左 栏 的 宽度 ， 向 右 外 边 距 是 右 栏 的 
宽度 。 

在 浏览 器 中 的 显示 效果 与 图 7.2 相 同 。 


前 面 分 析 了 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 网 页 布局 并 介绍 了 实现 方法 。 本 节 
将 以 一 个 实际 的 页 面 为 例 ， 详 细 介 绍 这 种 布局 的 页 面 制 作 方法 。 


7.3.1 效果 图 分 析 
如 图 7.3 所 示 是 一 个 文学 类 页 面 “ 中 国 诗歌 ”的 效果 图 。 


散文 尘 中 国 诗歌 
主机 人 ,当主 全 人 革 
fase meet A 


hemcx 江 在 ”中 尘 大 赛 
£7 RE anf 
名 


a 


图 7.3 “中 国 诗歌 ”的 效果 
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第 7 章 左右 两 栏 宽 度 固 定 ， 中 间 栏 宽度 自 适 应 的 布局 


如 图 7.4 所 示 ， 网 页 分 为 头 部 和 主体 内 容 2 个 部 分 。 


中 国语 坡 运 


品 《我 行 于 中 的 


初生 至 厅 秋 中 时 大 约 五 
分 ,上 中 “ 风 " 是 堆 方 民歌 ， 有 
歌 ， 分 大 验 和 人 
法 主 划 是 赋 , 比 、 兴 。 
刚 (以 攻 构 Ht 此 攀 岂 ) ， 
经 》 思 下 和 艺术 价 全 最 
《大风 >》、《 让 > 卫 是 


诗坛 动态 散文 诗 中 国 诗歌 
散文 诗 是 一 种 观 代 文件 :是 适 自 现 ， 当代 社会 人 现 | 

们 各 感 多 思 、 天 全 十 密 竺 心 下 特征 而 发 展 起 来 的 、 虽 

热 中 国 1000 多 年 前 束 有 交 似 航 文 区 的 作品 ， 欧 浊 隆 。 地 广 寺 邢 


的 居 术 温 夫 的 四 章良 廊 诗 ( 当 os HH 
ee 主 林内 安 各 8E 庆 作 
的 是 天 本 约 和 广 放 “前 太 弹 风 文 交 


老 队 从 此 开 娩 在 中 贺 撒 刊 上 出 现 。 对 于 记 一 文体 的 性 对 和 特点 ，《 文 
闻 辣 刊 》 在 322 年 各 再 过 程 论 探 讨 ,西光 (6 白 吕 ) .二 辐 、 王 平 队 竺 人 邵 生 表 了 


的 代表 作 。 《 诗 经》 对 后 必 诗 各 展 育 深 运 的 影 
刚 ， 成 物 国 古 站 文学 朋 区 主 义 传 护 的 入 站。 


所 到 ,有 四 十 首 " 表现 手 
<“ 化” 驯 是 比 


”人 


图 7.4 网 页 分 为 头 部 和 主体 内 容 2 个 部 分 


1. 头 部 


头 部 分 为 网 页 导航 、banner 和 网 页 标志 ， 如 图 7.5 所 示 。 


网 页 导航 


banner 


图 7.5 网 页 头 部 


网 页 导航 是 一 系列 的 文字 链接 ， 可 以 利 月 


2. 主体 内 容 


<ul> 列 表 实 现 。 网 页 banner 是 一 张 图 片 ， 在 CSS 


上 |， 将 banner 写 成 背景 图 片 置 于 网 页 标志 下 面 。 网 页 标志 是 一 张 图 片 ， 带 有 链接 ， 这 个 
链接 指向 网 站 的 首页 或 主题 页 面 。 


主体 内 容 分 为 左 栏 、 中 间 栏 和 右 栏 ， 如 图 7.6 所 示 是 页 面 的 主体 内 容 。 
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"小 党 尖 》 天 硬 的 同文 癌 儿 于 
栏 ， 译 看 浊 站 和) ,是 外 国文 诗 在 


文 请” 记 一 吉隆 此 开始 在 中 国 反 科 上册 疯 。 对 于 过 一 六 全 到 性 计 和 交点。< 文 ||、 
学 每 刊 》 在 192? 年 共有 过 理论 皇 计 ， 西 这 人 3 乒 汪 ) ,加权 、 王 平等 人 部 友 表 了 
mn. 


诗经 

< 请 径 > 是 中 辐 的 - 订 寺 @ 入 [1 雪人 包 上 帮 4 本 ， 则 E 所 基 
本 先 这 尖 卫 《 读 》， 又 闪 < 竺 = 百 》 丰 《三 吾 此 》， 它 由 全 了 自 本 用 
各 等 和 中 叶 大 的 五 百名 和 的 二 百 五 科 各- 右 乐 上 分 为 风 、 强 ,要 = 部 


《7 、《 民 > 拖 是 “网 ”的 ft 来 诈 ，《 诗 经 》 和 后 代 让 本 有 尿 运 gj 
胸 ， 了 轩 丰 并 六 了 可 并 于 色情 二 的 肖 头 。 


图 7.6 网 页 主体 内 容 


(1) 左 栏 
左 栏 包含 2 个 模块 ， 分 别 是 “诗坛 动态 ”和 “联系 我 们 ”， 如 图 7.7 所 示 。 


图 7.7 左 栏 


“诗坛 动态 ”包括 标题 和 与 诗坛 动态 相关 的 栏目 列表 ， 如 图 7.8 所 示 。 
“联系 我 们 ”包括 标题 和 联系 方式 。 联 系 方式 是 4 个 联系 平台 的 标志 ， 单 击 相应 的 标 
志 ， 可 以 打开 对 话 框 或 邮件 ， 与 网 页 作者 进行 沟通 和 联系 ， 如 图 7.9 所 示 。 


联系 我 们 。 旱 2 


BM 
联系 方式 


图 7.8 诗坛 动态 图 7.9 联系 我 们 


(2) 中 间 栏 
中 间 栏 是 网 页 的 主要 内 容 ， 是 两 类 诗歌 体裁 的 介绍 ， 包 括 散 文 诗 和 诗经 的 介绍 ， 如 图 
7.10 所 示 。 
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散文 诗 介绍 包括 标题 、 配 图 和 散文 诗 的 文字 介绍 ， 如 图 7.11 所 示 。 


其 中 ， 散 文 诗 介绍 的 标题 带 有 链接 ， 单 


文字 介绍 的 左边 ， 以 


第 7 章 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适应 的 布局 


散文 诗 
散文 诗 是 一 种 现代 文体 ， 是 适应 现 、 当 代 社 会 人 
们 秀 辐 多 思 、 复 杂 续 密 等 心理 特征 而 发 展 起 来 的 。 呈 
然 中 国 1000 多 年 前 就 有 类 似 散 文 圭 的 作品 ， 欧洲 在 
巧 、17 世 纪 不 少 作家 就 写 过 很 有 诗意 的 吉文 ， 但 作为 
一 种 创立 的 文学 样式 流行 起 来 是 在 19 世 纪 中 叶 以 后 。 第 一 个 正式 用 “小 散文 


诗 是 一 个 引进 的 文学 品种 。1915 年 2 孽 ? 期 的 过 中华 4 

的 届 千 浊 夫 的 四 章 表 文 诗 (当时 列 入 “小 说 ” 栏 ， 译 者 刘 半 农 ) ， 是 外 国 表 文 诗 在 
中 国 的 最 旱 译 本 。1913 年 4 鸯 5 斯 的 < 新 青年 》 符 表 了 刘 半 农 翻 译 的 印度 作 
品 < 找 行 雪 中 让 的 译文 ， 文 未 所 肘 的 说 明 指 出 已 是 一 篇 告 构 精 密 的 散文 诗 。“ 般 
文 诗 ” 这 一 名 称 从 此 开始 在 中 国 报刊 上 出 现 。 对 于 这 - 


学 旬刊》 在 1922 年 曾 有 过 理论 探讨 ， 西汉 人 b 振 鱼 ) 
意见 。 


似 诗经 多 是 中 国 最 早 的 一 部 诗歌 总 集 D] ,当今 世上 流传 的 版 本 , 则 是 毛 共 所 
注释 版 本 。 先 素 时 期 称 & 诗 》， 又 称 诗 三 百 》 或 《三 百 篇 》， 它 收集 了 自 西周 
初 年 至 前 秋 中 叶 大 约 五 百 多 年 的 三 百 零 五 条 诗歌。 音乐 上 分 为 风 、 雅 、 堪 三 部 
分 , 其 中 “ 风 ” 是 地 方 民歌 ， 有 十 五 国 由， 共 一 百 六 十 首 ; “ 雅 ” 主 要 是 棚 廷 和 

共 - 歌 ， 有 四 十 首 。 表 现 手 

et 

喻 《以 征 物 比 此 息 也 》，“ 兴 ”就 是 启发 〈 先 言 它 物 由 | 起 所 咏 之 词 也 ) 。《 诗 

经 》 思 想 和 艺林 价值 最 高 的 是 民歌 ，“ 读 者 歌 其 会 ， 劳 者 歌 其 事 ”， 芒 伐 檀 > 、 

芯 友 起 》、 世 展 》 就 是 “ 风 ” 的 代表 作 。 忒 诗经 》 对 后 代 诗 歌 发 展 有 深远 的 影 
响 ， 成为 我 国 古典 文学 现 立 主义 传统 的 源头 。 


图 7.10 中 间 栏 


标题 
散文 诗 是 一 种 现代 文体 ， 是 适应 现 、 当 代 社 会 
们 教 感 多 思 、 复 儿 续 密 等 心理 特征 而 发 展 起 来 的 。 
然 中 国 1000 多 年 前 就 有 类 似 艇 文 诗 的 作品 ， 欧洲 在 
65、 17 世纪 不 少 作家 就 写 过 很 有 诗意 的 租 文 ， 但 作 ; 
种 独立 的 文学 样式 流行 起 来 是 在 19 世 纪 中 叶 以 后 。 第 一 个 正式 用 “小 艇 文 
这 个 名 词 ， 和 有 意 采用 这 种 体裁 的 是 法 国 诗人 波 特 茉 尔 。 他 认为 艇 文 诗 “ 足 | 


以 适 应 灵魂 抒情 性 的 动荡 ， 畏 文字 介绍 并 。 在 中 国 新 文学 中 ， 艇 文 | 
是 一 个 引进 的 文学 品种 。19: 华 小 说 界 》 刊 登 的 用 文言 翻译 | 
] 屠 格 涅 夫 的 四 章 艇 文 诗 当时 列 入 “小 说 ” 栏 ， 译 者 刘 半 农 ) ， 是 外 国 艇 文 诗 在 | 
的 最 早 译本 。1918 年 4 卷 5 期 的 新 青年 杂志 ， 发 表 了 刘 半 农 翻 译 的 印度 f 

有 《我 行 雪 中 》 的 译文 ， 文 末 所 附 的 说 8 指出 它 是 一 入 结构 精密 的 租 文 许 。“ 艇 | 

了 文 诗 ” 这 一 名 称 从 此 开始 在 中 国 报刊 上 出 现 。 对 于 这 一 文体 的 性 质 和 特点 ，《 文 | 
学 旬刊 》 在 1922 年 曾 有 过 理论 探讨 ， 西 谍 (郑振铎)、 滕 固 、 王 平 陵 等 人 都 发 表 了 | 


图 7.11 散文 诗 介绍 


诗经 介绍 包括 标题 和 文字 介绍 ， 如 图 7.12 所 示 。 


链接 可 跳 转 到 散文 诗 的 详细 内 容 页 。 配 图 
图 文 环绕 的 形式 展现 。 配 图 与 文字 介绍 具有 一 定 的 边 距 。 
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人 | DIV+CSS 布 局 与 样式 之 网 站 设计 基础 


所 诗经 是 中 国 景 早 的 一 部 诗歌 总 集 [1] ， 当 今世 上 流传 的 版 本 ， 则 是 毛 芮 所 

枝 版 本 。 先 素 时 期 称 《 诗 》， 又 称 《 诗 三 百 》 或 《三 百 篇 》， 它 收集 了 自 西周 
年 至 春秋 中 叶 大 约 五 百 多 年 的 三 百 零 五 篇 诗歌 。 音乐 上 分 为 风 、 雅 、 颂 三 部 

片 ， 其 中 “ 风 ” 是 地 方 民 歌 , 有 十 五 国 风 , 共 一 百 六 十 首 ; “ 雅 ”主要 是 朝廷 乐 


坎 ， 分 大 雅 和 小 雅 ， 共 一 百 习 文字 介绍 上 宗庙 乐 歌 ， 有 四 十 首 。 表 现 手 

要 是 冉 、 比 、 兴 。“ 赋 ” 才 定 调 阵 《 服 队 其 事 而 直言 之 也 ) ，“ 比 ”就 是 比 

偷 《 以 彼 物 比 此 物 也 ) ，“ 兴 ”就 是 启发 《 先 言 它 物 站 引起 所 叶 之 词 也 ) 。《 诗 

》 思 想 和 艺术 价值 最 高 的 是 民歌 ,“ 饥 者 歌 其 食 ， 劳 者 歌 其 事 ”， 芯 伐 檀 》 、 

硕 饼 》、 冬 氓 》 就 是 “ 风 ” 的 代表 作 。 区 诗经 》 对 后 代 诗 歌 发 展 有 深远 的 影 
赂 ， 成 为 我 国 古典 文学 现实 主义 传统 的 源头 。 


图 7.12 诗经 介绍 


诗经 介绍 和 散文 诗 介绍 的 HTML 结 构 和 CSS 样 式 基本 一 样 ， 区 别 是 诗经 介绍 没有 配 图 。 


(3) 右 栏 


右 栏 是 与 网 站 相关 的 栏目 ， 主 要 


赛 和 诗人 天 地 ， 如 图 7.13 所 示 。 
右 栏 中 4 个 模块 的 HTML 结构 和 CSS 样 式 完全 相同 ， 每 个 模块 都 包括 标题 和 栏目 列表 ， 都 


可 以 由 <ul> 标 签 包含 若干 <li> 标 签 组 成 。 


4 个 模块 组 成 ， 分 别 是 中 国 诗歌 、 文 学 部 落 、 中 诗 大 


区 别 是: 每 个 模块 的 <ul> 列 表 项 的 数目 不 一 样 ， 中 


国 


诗歌 有 4 个 列表 项 ， 文 学 部 落 有 2 个 列表 项 ， 中 诗 大 赛 有 2 个 列表 项 ， 诗 人 天 地 有 2 个 列表 项 。 
右 栏 中 4 个 模块 的 组 成 如 图 7.14 所 示 。 


7.3.2 切 图 


网 中 国 i 诗歌 


文学 部 落 
ws 文学 部 洛 


中 诗 大 赛 
中 诗 大 赛 


于 
1 


诗人 天 地 


诗人 天 地 
诗人 时 站 


图 7.13 右 栏 


页 面 在 Photoshop 中 的 切片 如 图 7.15 所 示 。 


图 7.14 右 栏 中 4 个 模块 的 组 成 
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ii 第 7 齐 左 右 两 栏 宽度 固定 ， 中 间 栏 完 度 自 适应 的 布局 


切割 网 页 图 片 包 括 bannerjpg、logo.png、picl.jpg、skypepng、 


youtube.png。 


bannerjpg 是 网 页 banner 的 背景 


起 旦 


twitter2.png、vimeo.png、 


片 ，logo.png 是 网 页 标志 ，picl.jpg 是 中 间 栏 的 散文 诗 介 


绍 配 图 ，skype png、twitter2.png、vimeo png 和 youtube png 是 左 栏 的 “联系 我 们 ”中 的 4 种 联 
系 方式 对 应 的 标志 。 


散文 诗 


EE 入 法 是 一 各 现代 文体 ， 是 适应 现 、 当 代 社 会 人 


人 区 因 ,复生 特 HI 而 把 的 .时 
然 中 国 1o00 多 年 前 就 有 类 似 秀文 诗 的 作品 ， 欧州 在 
中 国 ai ar 下 4 了 过 委 有 半 间 的 对 文 ,但 人 为 
youtubespngr 5 起 未 是 在 ls 世纪 中 以后 第 一个 正 式 用 “和文 

个 名 词 ， 和 有 有 意 采 用 这 种 体 越 的 最 法国 尘 人 波 特 莱 尔 。 了 他 认为 舟 文 诗 “ 足 
本 情 革 的 动 ， 芝 幻 的 下 in 训 的 全”。 在 中 Sf 文学 中 和文 
入 是 一 全 峙 的 党 。ele 和 2 的 《中 华 小说 和 的 有 计生 
的 因 香 六 半 亿 5 入 “说 栏 ， 这 者 计 家) 是 外 区 洁 在 
中 国 的 最 早 译本 ，1918 十 4 岩 5 期 的 专 新 青年 》 ,发表 了 刘 半 农 般 译 的 印度 作 
品 《 和 中 了 的 于 文 ! 文 了 用 的 出 富村 的 表 尘 。“ 杉 
文 许 "这 一 名 称 从 此 开始 在 中 国 损 刊 上 出 现 。 对 于 这 一 文体 的 性 质 和 特点 ， 羽 文 
学 旬刊 在 1922 年 曾 有 这 理论 探讨 ， 西 谢 ( 郑 振 笃 )、 腺 加 、 王 十 了 等 人 都 发 表 了 


skype.png 


图 7.15 页 面 在 Photoshop 中 切片 


7.3.3 绘制 框架 图 


根据 前 面 对 网 页 效果 图 的 分 析 ， 


绘制 出 了 页 面 大 体 的 框架 图 ， 


中 国 诗歌 
现代 诗歌 
风尘 词 
家 请 苑 

寺 要 评论 
文字 部 党 
夏 孝文 学 

大 浆 文 学 
中 诗 大 赛 
;上 
大 强风 文学 奖 
诗人 天 地 


如 图 7.16 所 示 。 


出 


7.16 页 面 框架 


网 页 导航 、banner 和 主体 内 容 在 整个 框架 图 中 从 上 而 下 按 顺 序 排列 ， 这 3 部 分 在 浏览 器 中 
也 是 从 上 到 下 按 顺 序 显示 。 框 架 图 中 的 左 栏 对 应 效果 图 中 的 左 栏 ， 框 架 图 中 的 中 间 栏 对 应 效 
果 图 中 的 中 间 栏 ， 框 架 图 中 的 右 栏 对 应 页 面 效果 图 中 的 右 栏 。 


区 
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7.3.4 编写 XHTML 代码 


前 面 分 析 了 网 页 效果 图 ， 并 在 第 7.3.3 小 节 中 绘制 出 了 页 面 大 体 的 框架 图 ， 编 写 网 页 的 


XHTML 代码 如 下 。 
代码 7-5 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 中 国 诗歌 </title> 
06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 
08 <body> 
09 <xdiv class="menu"> 
10 <ul> 
I <1i><a href="#"> 诗 经 </a></1i> 
U2 <1i><a href="#"> 楚 辞 </a></1i> 
3 <1i><a href="#"> 乐 府 </a></1i> 
14 <1i><a href="#"> 古 体 诗 </a></1i> 
15 <1i><a href="#"> 四 言 诗 </a></1i> 
16 <li><a href="#"> 五 言 诗 </a></1i> 
7 <1i><a href="#"> 六 言 诗 </a></1i> 
18 <1i><a href="#"> 七 言 诗 </a></1i> 
19 <1i><a href="#"> 绝 句 </a></1i> 
20 <1i><a href="#"> 散 曲 </a></1i> 
2 </ul> 
22 </div> 
23 <div class="banner"> 
24 <hl><a href="index.html"> 中 国 诗歌 </a></h1> 
25 </qdly> 
26 <div id="bd" class="cf"> 
他 邓 <div class="side fl"> 
28 <div class="list"> 
29 <h3> 诗 坛 动态 </h3> 
30 <ul> 
3 <1i><a href="#"> 中 国 诗歌 报道 </a></1i> 
32 <1i><a href="#"> 中 诗 书坊 </a></1i> 
33 <1i><a href="#"> 中 诗作 家 文库 </a></1i> 
34 <1i><a href="#"> 中 国 诗歌 最 新 动态 </a></1i> 
35 </ul> 
36 </div> 
37 <div class="concat"> 
38 <h3> 联 系 我 们 </h3> 
号 <a href="#"> 
<img src="images/skype.png" alt="skype" /></a> 
40 <a href="#"> 
<img src="images/twitter2.png" alt="twitter" /></a> 
41 <a href="#"> 
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50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
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66 
67 
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73 
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76 
GA 
78 
3 
80 


81 
82 
83 
84 


85 
86 
87 
88 


<img src="images/vimeo.png" alt="vimeo" /></a> 
<a href="#"> 
<img src="images/youtube.png" alt="youtube" /></a> 
</div> 
</div> 
<div class="right fr"> 
<div class="list"> 
<h3> 中 国 诗歌 </h3> 
<ul> 
<1i><a href="#"> 现 代 诗 歌 </a></1i> 
<1i><a href="#"> 风 雅 诗 词 </a></1i> 
<1i><a href="#"> 散 文 诗 苑 </a></1i> 
<1i><a href="#"> 诗 歌 评论 </a></1i> 
</ul> 
</div> 
<div class="list"> 
<h3> 文 学 部 落 </h3> 
<ul> 
<1i><a href="#"> 夏 都 文学 </a></1i> 
<1i><a href="#"> 大 众 文学 </a></1i> 
</ul> 
</div> 
<div class="list"> 
<h3> 中 诗 大 赛 </h3> 
<ul> 
<1i><a href="#"> 钓 鱼 岛 杯 </a></1i> 
<1i><a href="#"> 大 雅 风 文 学 奖 </a></1i> 
</ul> 
</div> 
<div class="]list"> 
<h3> 诗 人 天 地 </h3> 
<ul> 
<1i><a href="#"> 诗 人 档案 </a></1i> 
<1i><a href="#"> 诗 人 驿站 </a></1i> 
</ul> 
</div> 
</div> 
<div class="main"> 
<div class="news"> 
<h2><a href="#"> 散 文 诗 </a></h2> 
<img src="images/picl.jpg" alt="" class="alignleft" /> 
<p> 散 文 诗 是 一 种 现代 文体 …… 腾 固 、 王 平 陵 等 人 都 发 表 了 意见 。</p> 
</div> 
<div class="news"> 
<h2><a href="#"> 诗 经 </a></h2> 
<p>《 诗 经 》 是 中 国 最 早 的 一 部 诗歌 总 集 ……《 诗 经 》 对 后 代 诗 歌 发 展 有 
深远 的 影响 ， 成 为 我 国 古 典 文学 现实 主义 传统 的 源头 。</p> 
</div> 
</div> 
</div> 
<==11tf Tte TE 61> 
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89 <script type="text/javascript" src="js/DD belatedPNG 0.0.8a-min.js"> 

</script> 

90 <script type="text/javascript">DD belatedPNG.fix("*");</script> 

91 <![endif]--> 

92 </body> 

93 </html> 

第 01 行 是 网 页 的 <!IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必 须 是 HTML 文 档 的 第 一 行 ， 位 
于 <html> 标签 之 前 。 第 02 行 和 第 93 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTMIL 文档。 

第 03~07 行 是 HTML 文档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 的 元 
素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 

第 04 行 用 <meta> 标 签 定义 网 页 的 编码 方式 是 utf-8。 第 05 行 是 网 页 的 标题 ， 第 06 行 是 网 页 
引用 的 样式 文件 地 址 。 第 08~92 行 是 网 页 主体 。 第 08 行 和 第 92 行 是 <body> 标 签 。<body> 标 签 
用 于 定义 HTML 文 档 的 主体 。 

第 88~91 行 是 网 页 中 的 JavaScript 代 码 ， 这 段 代 码 的 作用 是 : 在 IE 6 下 ，png24 格 式 图 片 的 
透明 或 半 透明 部 分 显示 灰色 ,为 了 解决 这 个 问题 ， 引 入 了 这 段 JavaScript 代 码 。 其 中 ， 第 89 行 
的 DD_belatedPNG 0.0.8a-min.js 是 一 个 JavaScript 插 件 ， 由 Drew Diller 编 写 ， 这 个 插件 对 解决 IE 6 
下 png24 图 片 不 透明 的 问题 起 到 了 关键 作用 。 

在 页 面 中 引入 DD_belatedPNG 0.0.8a-min.js， 用 法 如 下 : 


<script type="text/javascript" src="js/DD belatedPNG 0.0.8a-min.js"> 
</script> 


然后 在 页 面 中 分 情况 引入 下 面 的 JavaScript 代 码 : 


e@ 处 理 页 面 中 的 所 有 图 片 ， 包 括 HTML 和 CSS 中 的 png24 格 式 图 片 ， DD_belatedPNG. 
fx(”): 

e 使 处 理 全 部 HTML 中 的 图 片 : DD_belatedPNG fix('img'); 

@ 使 处 理 标签 header 下 的 图 片 : DD_belatedPNG fix('.header img): 

@ 使 处 理 多 个 标签 可 以 连续 使 用 : DD belatedPNG fix('.header img.menu 1i'); 


第 09~25 行 是 网 页 头 部 ， 其 中 第 09~22 行 是 网 页 导航 。 第 09 行 和 第 22 行 是 网 页 导航 的 最 外 
层 容器 ， 使 用 了 <div> 标 签 ， 这 个 容器 上 添加 了 类 menu。 第 10~21 行 是 导航 中 的 主体 内 容 ， 使 
用 了 <ul> 列 表 。 第 11~20 行 是 <ul> 中 的 10 个 <li> 标 签 。 每 个 <li> 标 签 中 都 包含 <a> 标 签 ， 用 于 指 
向 这 个 导航 对 应 的 详细 页 面 。 

第 23 行 和 第 25 行 是 网 页 banner 的 最 外 层 容器 ， 使 用 了 <div> 标 签 ， 在 该 容器 上 添加 了 类 
banner， 这 个 类 用 于 在 CSS 中 添加 背景 图 片 。 

第 24 行 是 网 页 标志 ， 由 <h1> 标 签 包含 “中 国 诗 歌 ” 组 成 ， 并 且 “ 中 国 诗 歌 ” 外 层 有 链 
接 ， 这 个 链接 指向 网 站 首页 。 从 前 面 的 分 析 中 可 知 ， 网 页 标志 的 图 片 将 作为 背景 图 片 呈现 
在 页 面 中 ，<a> 标 签 中 的 文字 可 有 可 无 。 但 是 为 了 更 好 的 用 户 体验 以 及 方便 搜索 引擎 抓 取 页 
面 ，<a> 中 最 好 有 文字 ， 并 且 这 段 文字 应 该 体现 网 站 的 主题 思想 。 

第 26~87 行 是 网 页 的 主体 内 容 。 第 26 行 和 第 87 行 是 主体 内 容 所 在 的 最 外 层 容器 ， 使 用 了 
<div> 标 签 ，id 为 bd，class 类 为 cf。-.cf 的 作用 是 为 了 使 地 4 容器 能 包含 其 中 浮动 的 各 栏 。 

第 27~44 行 是 左 栏 ， 第 27 行 和 第 44 行 是 左 栏 最 外 层 容器 ， 使 用 了 <div> 标 签 ， 该 容器 上 添加 了 
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class 类 side 和 有 H。 有 的 作用 是 使 左 栏 向 左 浮动 ， 从 而 使 左 栏 位 于 页 面 的 左边 。 

第 28~36 行 是 “诗坛 动态 ”， 第 28 行 和 第 36 行 是 “诗坛 动态 ”的 最 外 层 容 器 ， 使 用 了 <div> 

标签 ， 在 该 容器 上 添加 了 类 list。 前 面 分 析 了 效果 图 ， 有 5 个 模块 的 样式 和 结构 是 完全 一 样 
的 ， 分 别 是 左 栏 的 “诗坛 动态 ”、 右 栏 的 “中 国 诗歌 ”、“ 文 学 部 落 ”、“ 中 诗 大 赛 ” 和 
“诗人 天 地 ”。 这 5 个 模块 可 以 统一 编写 CSS 样 式 ， 在 相应 容器 或 元 素 上 应 用 相同 的 class 类 ， 
不 但 可 以 呈现 相同 的 样式 和 风格 ， 还 可 以 节约 时 间 ， 减 小 CSS 文 件 大 小 。 第 29 行 是 “诗坛 动 
态 ” 的 标题 ， 使 用 了 <h3> 标 签 ， 包 含 文字 “诗坛 动态 ”。 
第 30~35 行 是 诗坛 动态 的 栏目 列表 ， 使 用 了 <ul> 列 表 ， 每 个 <li> 中 包含 栏目 名 称 ， 并 且 每 
个 栏目 名 称 上 面 有 指向 栏目 详细 页 面 的 链接 。 第 37~43 行 是 “联系 我 们 ”， 第 37 行 和 第 43 行 
是 “联系 我 们 ”的 最 外 层 容 器 ， 使 用 了 <div> 标 签 ， 该 容器 上 添加 了 class 类 concat。 第 38 行 是 
“联系 我 们 ”的 标题 ， 使 用 了 <h3> 标 签 ， 包 含 文字 “联系 我 们 ”。 前 面 分 析 了 效果 图 ， 左 右 
两 栏 中 各 模块 的 标题 样式 是 一 样 的 ， 因 此 都 用 了 <h3> 标 签 。 

第 39~42 行 是 联系 我 们 的 4 种 方式 ， 分 别 是 skype、twitter、vimeo 和 youtube。 每 种 联系 方 
式 都 由 <img> 标 签 引入 相应 的 标志 ， 并 且 在 每 个 <img> 标 签 外 层 都 用 <a> 标 签 包 衰 ， 以 便 打开 
邮件 或 对 话 框 。 

第 45~76 行 是 右 栏 ， 第 45 行 和 第 76 行 是 右 栏 最 外 层 容 器 ， 使 用 了 <div> 标 签 ， 该 容器 上 添 
加 了 class 类 : right 和 癸 。 全 的 作用 是 使 左 栏 向 右 浮动 ， 从 而 使 右 栏 位 于 页 面 的 右边 。 

第 46~54 行 是 “中 国 诗歌 ”，HTML 结 构 和 CSS 样 式 与 第 28~36 行 的 “诗坛 动态 ”一 样 ， 
不 再 发 述 。 第 55~61 行 是 “文学 部 落 ”。HTML 结 构 和 CSS 样 式 与 第 28~36 行 的 “诗坛 动态 ” 
一 样 ， 不 再 发 述 。 第 62~68 行 是 “中 诗 大 赛 ”，HIML 结 构 和 CSS 样 式 与 第 28~36 行 的 “诗坛 
动态 ”一 样 ， 不 再 费 述 。 第 69~75 行 是 “诗人 天 地 ”，HTML 结 构 和 CSS 样 式 与 第 28~36 行 的 
“诗坛 动态 ”一 样 ， 不 再 发 述 。 

第 77~86 行 是 中 间 栏 ， 第 77 行 和 第 86 行 是 中 间 栏 的 最 外 层 容器 ， 使 用 了 <div> 标 签 ， 该 容 
器 上 添加 了 class 类 main。 由 于 中 间 栏 是 自 适应 宽度 的 ， 其 宽度 取决 于 最 外 层 容 器 #bd 的 宽度 、 
左 栏 的 宽度 和 右 栏 的 宽度 ， 因 此 中 间 栏 不 需要 设置 浮动 ， 在 HTML 文 档 中 是 默认 文档 流 ， 会 
动 排 列 在 左右 浮动 栏 的 中 间 。 

第 78~81 行 是 “散文 诗 ” 介 绍 。 第 79 行 是 “散文 诗 ” 标 题 ， 使 用 了 <h2> 标 签 。 中 间 栏 中 
标题 的 样式 和 左右 两 栏 的 标题 样式 不 一 样 ， 而 且 在 重要 性 方面 ， 中 间 栏 要 优先 于 左右 两 栏 ， 
因此 中 间 栏 的 标题 用 了 <h2> 标 签 。 第 80 行 是 “散文 诗 ” 中 的 配 图 和 文字 介绍 。 

第 82~85 行 是 “诗经 ”介绍 ， 第 83 行 是 “诗经 ”标题 ， 与 “散文 诗 ” 介 绍 中 的 标题 一 
样 ， 使 用 了 <h2> 标 签 。 第 84 行 是 “诗经 ”中 的 文字 介绍 。 


7.3.5 编写 CSS 代 码 


根据 对 网 页 效果 图 和 XHTML 代 码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 。 
代码 7-6 


01 /*css reset*/ 

02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6é,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 

03 table{border-collapse:collapse; border-spacing:0;} 

04 ol,ul{list-style:none;} 
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05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 

08 a{text-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:"'"';} 

11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 

13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 

15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

6) *sCE{Zoo0m:1?} 

17 /*global css*/ 

18 a{color:#407E80;text-decoration:none;} 

19 a:hover{color:#333;text-decoration:underline;} 

20 .fl{float:left;display:inline;} 

21 .frf{float:right;display:inline;} 

2 人 body{font-size:14px;color:#333;font-family:" 宋 体 "， Arial, 
Verdana, Geneva, Helvetica, sans-serif; line-height:30px; } 

23 .banner{background:url(../images/banner.jpg) 
repeat left top;height:90px;padding:10px 0 0 20px;} 

24 hl{background:url(../images/logo.png) 
repeat left top;width:95px;height:80px;} 

25 hl a{fdisplay:block;width:100%;height:100%;text-indent:-999em;} 

26 h2{font-size:24px;text-align:center;margin:0 0 lO0px 0; 
font-family:' 微 软 雅 黑 '; font-weight:normal;} 

27 p{text-indent:2em;} 

28 h3{padding:1l0px 0 Spx;font-family: ' 微 软 雅 黑 ' ; font-size: 18px; 
font-weight:normal;} 

29 /*module css*/ 

30 #bd{padding:20px 20px 0;} 

31 .side{width:200px;} 

32 .right{width:200px;} 

33 .main{margin:0 210px 0 210px;} 

34 .main img{float:left;display:inline;margin:0 24px 1l2px 0;} 

35 .list ul li{height:30px;line-height:30px;overflow:hidden;} 

36 .concat img{margin:0 10px 0 0;float:left;display:inline;} 

37 .menu{height:50px;line-height:50px; 
margin:0 auto;background:#407E80;font-family:" 微 软 雅 黑 ot hi 

38 .menu ul{margin:0 0 0 50px;overflow:hidden;} 

39 .menu li{float:left;display:inline;margin:0 1l0px;} 

40 .menu a{font-size:14px;color:#fff;} 


CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 重 置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 
重 置 样式 ， 第 17~28 行 是 公共 样式 ， 第 29~40 行 是 模块 样式 。 通 过 CSS 重 置 代码 ， 对 相关 元 素 
的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 

高 浏览 器 的 兼容 性 。 通 过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 重复 应 用 在 不 同 的 模块 
中 ， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 

第 01~16 行 的 详细 讲解 ， 请 参考 第 2 章 。 后 面 每 一 章 的 CSS 重 置 代码 都 是 一 样 的 ， 在 制作 
一 个 新 网 页 时 ， 可 以 先 把 这 部 分 CSS 样 式 复制 到 新 页 面 的 CSS 样 式 表 中 ， 再 开始 编写 新 页 面 
的 公共 样式 和 各 个 模块 的 样式 。 
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第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设置 了 颜色 、 下 划 线 是 否 显示 ， 其 中 第 
18 行 中 的 text-decoration:none 表 示 页 面 中 的 所 有 链接 在 普通 状态 下 不 显示 下 划 线 ， 第 19 行 的 
text-decoration:underline 表 示 页 面 中 的 所 有 链接 在 鼠标 移入 时 显示 下 划 线 。 

第 20~21 行 分 别 定义 了 2 个 通用 类 : 身 和 和 代 。f 租 是 向 左 浮动 ， 位 是 向 右 浮 动 ， 其 中 
display:inline 用 于 解决 下 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <body> 标 签 设置 了 文字 大 小 是 14px， 文 字 颜 色 是 #333， 字 体 是 宋体 ， 行 高 是 
30px。 

第 23 行 是 网 页 banner 的 样式 ， 定 义 了 banner 的 背景 图 片 是 bannerjpg， 高 度 是 90px， 内 边 
距 分 别 是 10px、0px、0px、20px。 当 值 为 0px 时 ， 可 以 省 略 单位 px， 简 写 为 0。 


吾 banner 在 页 面 中 呈现 时 ， 占 据 的 实际 高 度 是 100px， 即 width (90px) +padding-top (10px) 
3 +padding-bottom (0px) = 占据 的 实际 高 度 (100px) 。 


第 24 行 是 <h1> 标 签 的 样式 ，<h1> 标 签 是 表示 网 页 的 标志 。<h1l> 标 签 的 样式 中 分 别 定 义 了 
标志 的 背景 图 片 logo.png、 高 度 和 宽度 。 

第 25 行 是 标志 中 链接 的 样式 ， 定 义 了 链接 的 宽度 、 高 度 和 向 左 缩 进 999em。 其 中 ， 
display:block 是 将 <a> 标 签 由 内 联 元 素 转换 成 块 元 素 ， 从 而 可 以 定义 <a> 标 签 的 宽度 和 高 度 。 
从 效果 图 中 可 以 知道 ， 网 页 的 标志 是 一 张 背景 图 片 ， 不 需要 在 页 面 中 显示 任何 文字 给 用 户 看 
到 。 “text-indent:-999em” 按 字面 意思 是 向 左 缩 进 999em，999em 是 一 个 非常 大 的 数字 ， 
远 远 超出 了 页 面 的 宽度 ， 这 样 做 的 结果 是 可 以 将 <a> 标 签 中 的 文字 隐藏 掉 ， 使 之 不 出 现在 
网 页 中 。 

第 26 行 是 <h2> 标 签 的 样式 ， 中 间 栏 的 新 闻 标 题 由 <h2> 标 签 包含 文字 组 成 ， 因 此 这 里 实际 

是 中 间 栏 新 闻 标 题 的 样式 ， 分 别 定义 了 文字 大 小 为 24px， 文 字 水 平方 向 居中 显示 ， 标 题 的 
外 边 距 ， 标 题 的 字体 是 微软 雅 黑 ， 标 题 文字 按照 普通 粗细 显示 。 

第 27 行 定义 了 网 页 中 所 有 <p> 标 签 的 样式 ， 即 网 页 中 所 有 文字 段落 向 右 缩 进 2 个 汉字 。 第 
28 行 是 网 页 中 所 有 <h3> 标 签 的 样式 。 左 栏 和 右 栏 中 各 个 模块 的 标题 都 使 用 了 <h3> 标 签 。<h3> 
标签 分 别 定义 了 内 边 距 、 字 体 ， 文 字 按 照 普 通 粗 细 显 示 。 第 30 行 是 主体 内 容 的 最 外 层 容器 的 
样式 ， 定 义 了 容器 的 内 边 距 。 

第 31 行 是 左 栏 的 样式 ， 定 义 了 宽度 是 200px。 第 32 行 是 右 栏 的 样式 ， 定 义 了 宽度 是 
200px。 

第 33 行 是 中 间 栏 的 样式 ， 定 义 了 外 边 距 。 其 中 ， 上 下 外 边 距 是 0px， 左 右 外 边 距 是 
210px。 由 第 31 行 和 第 32 行 可 知 ， 左 栏 和 右 栏 的 宽度 都 是 200px， 因 此 在 左右 两 栏 宽度 固定 ， 
中 间 栏 自 适应 的 布局 中 ， 中 间 栏 是 不 能 定义 宽度 的 ， 它 的 宽度 取决 于 与 之 相 邻 的 左 栏 和 右 栏 
的 宽度 。 中 间 栏 没有 浮动 和 定位 ， 在 CSS 中 是 默认 文档 流 ， 即 默认 宽度 是 其 父 容器 #bd 的 宽 
度 。 当 中 间 栏 的 内 容 超 出 左 栏 或 右 栏 的 高 度 时 ， 中 间 栏 的 内 容 将 会 显示 在 左 栏 或 右 栏 的 下 
方 ， 模 糊 了 页 面 中 左 中 右 三 栏 的 界限 ， 也 不 符合 效果 图 中 的 展现 ， 因 此 ， 应 当 在 中 间 栏 的 外 
层 容器 上 添加 样式 margin-left 和 margin-right。 其 中 ，margin-left 是 左 栏 的 宽度 ，margin-right 是 
右 栏 的 宽度 。 更 进一步 ， 为 了 使 中 间 栏 与 左 栏 、 右 栏 之 间 有 间隙 ，margin-left 的 值 修改 为 : 左 
栏 的 宽度 〈200px) + 间隙 宽度 (10px) =210px。 同 理 ，margin-right 的 值 修改 为 : 右 栏 的 宽度 
(200px) + 间隙 宽度 〈10px) =210px。 

第 34 行 是 中 间 栏 中 图 片 的 样式 ， 散 文 诗 介绍 中 的 配 图 应 用 了 该 样式 。 该 样式 定义 了 图 片 
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向 左 浮动 和 外 边 距 。 其 中 ，display:inline 解 决 了 IE 6 下 浮动 元 素 左右 双 外 边 距 的 问题 。 

第 35 行 是 class 类 list 下 <li> 标 签 的 样式 。 左 右 两 栏 中 共 5 个 模块 都 应 用 了 该 样式 ， 分 别 是 左 
栏 的 “诗坛 动态 ”、 右 栏 的 “中 国 诗歌 ”、“ 文 学 部 落 ”、“ 中 诗 大 赛 ” 和 “诗人 天 地 ”。 
<l 这 标签 中 分 别 定义 了 高 度 、 行 高 和 隐藏 溢出 。 其 中 高 度 和 行 高 的 值 设置 为 相等 ， 可 以 是 <li> 
中 的 文字 垂直 居中 显示 ， 这 是 一 个 技巧 ， 在 网 页 制作 中 常常 用 到 。overflow:hidden 用 于 隐藏 
溢出 容器 外 的 内 容 ， 增 加 这 条 样式 是 为 了 防止 <ji> 标 签 中 的 文字 过 多 ， 将 <li> 撑 大 ， 从 而 造成 
网 页 布局 变形 。 
第 36 行 是 左 栏 中 “联系 我 们 ”的 图 片 样式 。 为 每 个 图 片 定义 了 外 边 距 和 向 左 浮动 。 其 
中 ，display:inline 解 决 了 IE 6 下 浮动 元 素 左右 双 外 边 距 的 问题 。 

第 37~40 行 是 导航 的 样式 ， 第 37 行 是 导航 最 外 层 容 器 的 样式 ， 定 义 了 导航 的 高 度 、 行 
高 、 外 边 距 、 背 景 颜色 和 字体 。 其 中 ，height:50px 和 line-height:50px 组 合 使 用 ， 可 以 使 导航 中 
的 文字 垂直 居中 显示 。 在 margin:0 auto 中 ， 将 margin-left 和 margin-right 设 置 为 auto， 实 现 了 导 
航 在 其 父 容器 body 中 水 平 居 中 显示 。 

第 38 行 是 导航 中 <ul> 标 签 的 样式 ， 定 义 了 外 边 距 和 隐藏 溢出 。overflow:hidden 在 此 处 
的 作用 是 使 <ul> 标 签 包含 其 中 浮动 的 <li> 标 签 。 浮 动 的 容器 是 不 在 默认 文档 流 中 的 ， 所 以 
文档 的 普通 流 中 的 元 素 或 容器 表现 得 就 像 浮 动容 器 或 元 素 不 存在 一 样 。 当 容器 A 中 的 子 元 
素 浮动 时 ， 容 器 A 的 边框 是 不 包含 子 元 素 的， 为 了 解决 这 个 问题 ， 在 容器 A 上 面 添加 样式 
overflow:hidden 往 往 可 以 使 容器 A 包含 浮动 的 子 元 素 。 

第 39 行 是 导航 中 每 个 <li> 标 签 的 样式 ， 分 别 定 义 了 向 左 浮动 和 外 边 距 。 其 中 ， 
display:inline 解 决 了 正 6 下 浮动 元 素 左右 双 外 边 距 的 问题 。 第 40 行 是 导航 中 文字 链接 的 样式 ， 
分 别 定义 了 文字 大 小 和 文字 颜色 。 


7.4 小 结 


本 章 主要 讲解 了 左右 两 栏 宽度 固定 ， 中 间 栏 宽度 自 适 应 的 网 页 布局 实现 方法 ， 其 中 主要 
介绍 了 两 种 方法 来 实现 这 种 布局 ， 分 别 是 : 

@ 左右 两 栏 浮动 ， 中 间 栏 默认 文档 流 并 设置 左右 外 边 距 。 

e 左右 两 栏 绝对 定位 ， 中 间 栏 默认 文档 流 并 设置 左右 外 边 距 。 

两 种 方法 各 有 优 劣 ， 读 者 可 以 根据 实际 项 目 需要 灵活 使 用 。 

最 后 通过 一 个 简单 的 案例 ， 进 一 步 讲解 了 如 何 对 这 类 页 面 进行 网 页 布局 ， 加 深 了 对 本 章 
介绍 方法 的 理解 和 掌握 。 
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由 于 设计 页 面 的 需要 ， 要 把 两 个 并 排 显示 的 栏 实现 一 样 高 度 的 效 
果 ， 例 如 ， 左 右 两 栏 布局 ， 每 栏 的 高 度 相 同 ， 但 是 每 栏 中 的 内 容 多 少 不 
确定 。 这 种 将 每 栏 高 度 设置 为 相同 的 布局 就 是 高 度 自 适 应 的 布局 。 本 章 
将 主要 介绍 高 度 自 适 应 的 网 页 布局 ， 这 种 布局 方式 是 网 站 中 常见 的 布局 
方式 之 三 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


。 页 面 布 局 的 分 析 : 了 解 高 度 自 适应 的 布局 ， 并 对 这 种 布局 方 
式 进行 分 析 。 

。 页 面 布 局 的 实现 ; 介绍 了 两 种 实现 方法 ， 在 实际 项 目 中 根据 
情况 灵活 运用 。 

。 通过 一 个 网 页 实例 进一步 掌握 实现 这 种 布局 的 方法 。 

。 对 本 章 所 介绍 的 布局 方式 进行 总 结 。 


8.1 页面 布 局 的 分 析 


本 节 将 展示 高 度 自 适应 的 网 页 在 浏览 器 中 的 显示 效果 ， 并 对 这 种 布局 进行 分 析 。 


8.1.1 示意 图 


高 度 自 适应 的 页 面 在 浏览 器 中 的 布局 如 图 8.1 所 示 。 


各 !; 
箱 栏 | 第] 栏 | 一 || 状 : 
度 
网 页 宽度 
记 一 屏 砷 究 度 一 一 


镶 、|DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


8.1.2 布局 分 析 


在 高 度 自 适 应 的 布局 


Ph， 左右 两 栏 或 几 栏 中 ， 任 何 一 个 栏 的 内 容 变 化 ， 所 有 栏 的 高 度 都 


会 一 起 变化 。 在 视觉 上 的 效果 就 是 ， 所 有 栏 的 高 度 都 相同 。 


如 图 8.1 所 示 ， 左 栏 和 右 栏 9 
同 主要 用 于 符合 效果 图 


h 内 容 有 多 有 少 ， 但 高 度 是 一 样 的 ， 将 各 个 栏 的 高 度 设置 成 相 


中 的 展示 ， 使 页 面 更 加 美观 。 


8.2 ”页面 布 局 的 实现 


Ns 


高 度 自 适 应 的 布 


局 在 网 页 制作 中 很 常见 ， 这 种 布局 的 实现 与 HTML 和 CSS 有 关 的 主要 有 


两 种 方法 ， 包 括 正 负 内 外 边 距 和 为 父 容器 添加 背景 图 。 


8.2.1 正 负 内 4 


h 边 距 


在 每 个 需要 高 度 对 齐 的 栏 的 最 外 层 容器 上 添加 CSS 核 心 代码 : 


margin-bottom:-3000px; padding-bottom:3000px; 


其 中 数值 不 固定 ， 可 以 随意 变化 。 编 写 XHTML 代 码 如 下 。 


代码 8-1 


01 <!DOCTYPE 
02 <html> 
03 <head> 


HTML> 


04 <meta charset="utf-8"> 
05 <title> 高 度 自 适应 </title> 
06 <link href="style.css" rel="stylesheet" type="text/css" /> 


07 </head> 
08 <body> 


09 <xdiv id="doc" class="cf"> 

10 <div class="side f1"> 左 栏 </div> 

了 <div class="right fr"> 右 栏 内 容 右 栏 内 容 右 栏 内 容 右 栏 内 容 右 栏 内 容 
右 栏 内 容 右 栏 内 容 右 栏 内 容 </div> 


12 </div> 
13 </body> 
14 </html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 网 页 的 html 头 部 元 素 。 第 02 行 和 第 14 行 
是 页 面 的 html 标 签 。 第 08 行 和 第 13 行 是 页 面 的 body 标 签 。 第 09 行 和 第 12 行 是 页 面 最 外 层 容器 


#doc， 这 个 容器 用 于 


显示 网 页 的 


内 容 。 第 10 行 是 左 栏 ， 样 式 是 .side 和 ff， 第 11 行 是 右 栏 ， 样 式 


是 :right 和 位 。 其 中 ， 类 f 定 义 了 向 左 浮动 ， 类 在 定义 了 向 右 浮动 。 
根据 页 面 的 XHTML 结构 ， 编 写 CSS 代 码 如 下 。 
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代码 8-2 


01 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

O02 = CEf{Zo0m: 1 

03 .fl{float:left;display:inline;} 

04 .fr{float:right;display:inline;} 

05 body{background:#ddd;} 

06 #doc{width:300px;font-family: "微软 雅 黑 ";font-size:18px; 
color:#fff;overflow:hidden;} 

07 .side{width:100px;background:red; margin-bottom:-3000px; 
padding-bottom:3000px;} 

08 .right{ width:180px;background:green; margin-bottom:-3000px; 
padding-bottom: 3000px;} 


第 01~02 行 定义 的 .cf 类 是 为 了 清除 容器 的 浮动 ， 当 内 层 浮动 容器 的 高 度 变化 时 ， 外 
层 容 器 的 高 度 也 随 着 变化 。 第 03 行 定义 的 .fl 类 ， 通 过 float:left 设 置 了 向 左 浮动 ， 并 通过 
display:inline 解 决 了 IE 6 下 的 浏览 器 兼容 问题 ， 即 网 页 制作 中 经 常 遇 到 的 IE 6 的 双边 距 bug。 第 
04 行 定义 的 .在 类 ， 通 过 float'right 设 置 了 向 右 浮动 。 第 05 行 是 页 面 中 body 标 签 的 样式 ， 设 置 了 
背景 颜色 ，body 标 签 的 宽度 和 高 度 也 等 于 浏览 器 显示 区 域 的 宽度 和 高 度 。 第 06 行 是 网 页 最 外 
层 容 器 #doc 的 样式 ， 设 置 了 宽度 为 300px， 字 体 是 微软 雅 黑 ， 文 字 大 小 是 18px， 文 字 颜 色 是 
白色。 第 07 行 是 左 栏 容器 .side 的 样式 ， 设 置 了 宽度 为 100px， 背 景 颜 色 是 红色 ， 向 下 的 外 边 距 
是 -3000px， 向 下 的 内 边 距 是 3000px。 第 08 行 是 右 栏 容 器 .right 的 样式 ， 设 置 了 宽度 是 180px， 
背景 颜色 是 绿色 ， 向 下 的 外 边 距 是 -3000px， 向 下 的 内 边 距 是 3000px。 

在 浏览 器 中 的 显示 效果 如 图 8.2 所 示 。 


图 8.2 在 浏览 器 中 的 显示 效果 


总 CSS 核 心 代 码 部 分 的 3000 像 素 是 个 可 变 值 ， 如 果 您 的 分 栏 高 度 不 可 能 超过 2000 像 素 ， 就 可 
3 ”以 设 为 2000 像 素 ， 如 果 会 超过 3000 像 素 ， 那 么 需要 修改 值 为 4000 像 素 或 是 更 高 。 父 标签 的 
overflow:hidden 属 性 是 必须 的 ， 否 则 会 显示 溢出 的 内 容 。 


8.2.2 为 父 容器 添加 背景 图 
为 网 页 中 各 个 栏 的 父 容器 设置 一 张 背景 图 片 来 模拟 各 栏 等 高 是 另 一 种 常用 的 方法 。 
编写 XHTML 代码 如 下 。 
代码 8-3 
01 <!DOCTYPE HTML> 


02 <html> 
03 <head> 


4 
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04 
05 
06 
07 
08 
09 
10 
LE 


12 
13 
14 


<meta charset="utf-8"> 

<title> 高 度 自 适 应 </title> 

<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 

<div id="doc" class="cf"> 


<div class="side 11"> 左 栏 </div> 
<div class="right fr"> 右 栏 内 容 右 栏 内 容 右 栏 内 容 右 栏 内 容 右 栏 内 容 
右 栏 内 容 右 栏 内 容 右 栏 内 容 </div> 

</div> 

</body> 

</html> 


根据 页 面 的 XHTML 结 构 ， 编 写 CSS 代 码 如 下 。 
代码 8-4 


01 


CSS 


.Cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

woome le 

.fl{float:left;display:inline;} 

.fr{float:right;display:inline;} 

body{background:#ddd;} 

#doc{width:300px;font-family: "微软 雅 黑 "; font-size: 18px; 
color:#fff;background:url (bg.jpg) repeat-y left top;} 
.side{width:100px; } 

.right{ width:180px; } 


代码 也 与 第 8.2.1 小 节 中 介绍 的 正 负 内 外 边 距 方法 的 CSS 代 码 基 本 相同 。 区 别 是 : 在 


第 06 行 的 #doc 容 器 上 添加 了 背景 图 片 bg.jpg， 并 且 bg.jpg 图 片 在 Y 轴 方向 上 垂直 平 铺 。 第 07 行 
和 第 08 行 分 别 设置 了 左 栏 和 右 栏 的 宽度 。 其 中 ， 第 06 行 添加 到 #doc 容 器 上 的 背景 图 bg.jpg 将 作 
为 左 栏 .side 容 器 和 右 栏 right 容 器 的 背景 。 当 左 栏 或 右 栏 的 高 度 变化 时 ， 最 外 层 容 器 #doc 的 高 
度 也 随 着 变化 ， 由 于 背景 图 片 bgjpg 在 容器 #doc 中 铺 满 整 个 容器 ， 因 此 在 页 面 上 用 户 将 看 到 左 
栏 和 右 栏 的 高 度 一 致 的 假象 。 

在 浏览 器 中 的 显示 效果 与 图 8.2 相 同 。 


8:3 网 页 实例 


前 面 分 析 了 高 度 自 适应 的 网 页 布局 并 介绍 了 实现 方法 ， 本 节 将 以 一 个 实际 的 页 面 为 例 ， 
详细 介绍 这 种 布局 的 页 面 制作 方法 。 


83.1 


如 图 


效果 图 分 析 
8.3 所 示 是 一 个 旅游 专 是 页面“ 三 亚 半山 半岛 帆船 港 酒店 ”的 效果 图 。 
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焉 半山 尘 名 Mr 舱 注 碧 店 


~ 2012 (i pj! 


沃 处 计 乒 于 机 由 夺 创办 干 1973 年 ,是 全 球 影响 力 最 大 的 专业 帆船 讲 之 一 ， 委 四 年 举办 一 次 ,被 疗 力 -航海 的 球 
各 NJ”， 这 是 一 场 F 9 个 多 月 的 海上 马拉松 ， 航 只 们 要 路 技 五 大 浏 四 大 洋 ， 向 人 类 乔 力 的 极 服 疾 出 措 成 .三 
亚 于 山 半 品 机 朋 语 看 牛 是 2012 活 尔 庄重 于 机 船 过 大 中 华 区 唯一 启 万 指定 拱 竺 有 后 , 由 稻 泄 有 后 永山 途 海 ， 放 针 机 
目 ， 下 天 白云 着 训 万古， 海天 一 线 仿 作 可 讲 司 。 


4 月 提 一 4 月 16 日 晨 避 污 改 秀 博 ; 我 相信 在 三 亚 半 山 半 乌 孝 航 泄 而 店 # 训 受 玖 海蓝 天 、 水 清 阔 白 一 并 @s 个 
天 涯 好 友 ,， 就 有 宙 玩 得 价值 10797 元 得 洪江 后 房 卷 。 过 请 关注 天 沽 三 亚 ” 


三 亚 韦 有 有 亚龙湾、 天涯海角 游 觉 区、 南山 文化 读 游 区 、 大 小 月 天 风暴 区 、 大 东汉 风暴 区、 二! 
清风 景区 、 应 笔 全 游览 区 及 西 急 、 旺 赤 兴 | 名; 海上 乐 加 等 理 名 景点 。 


图 8.3 


如 图 8.4 所 示 ， 网 页 分 为 头 部 和 主体 内 容 两 个 部 分 。 


be 


话 尔 沃 环球 吸 般 夺 创 办 于 1973 年 ， 是 全 球 影响 力 最 大 的 专业 山 船 赛 之 一 ,每 四 年 举办 一 次 ， 被 交 为 "航海 的 珠 
物产 蚂 峰 *， 这 是 一 场所 十 9 个 多 月 的 海上 马拉松 ， 船 员 们 要 跨 拱 五 大 州 四 大 洋 ， 向 人 天 射 力 的 极限 宏 出 找 战 。 三 
亚 半山 半岛 帆船 汇 酒 店 是 2012 沃 尔 沃 环球 骨 般 赛 大 中 华 区 叭 一 官方 指定 接 符 酒店 帆船 港 酒店 依 山 馆 海 ， 放 眼 报 


目 ， 黄 天 白云 碧 诚 万 需 ， 海 天 一 线 令 人心 旷 神 怕 。 
一 
4 有 5 日 月 16 晶 基 避 4 生计: 我 人 在 = 玲 引 1 多 上 于 天、 有--jf@s1 
天 注 好 友 ， 就 有 机 获得 价值 10797 元 的 三 张帆 船 卉 酒店 房 券 、 还 请 关注 天 注 三 炎 *! 


三 亚 拥有 亚龙湾 、 天 涯 虐 角 洪 笛 区 .南山 文化 汪 游 区 、 大 小 洞天 风景 区 、 大 东 当 风景 区 、 庚 回头 公园 、 三 亚 
湾 风景 区 、 荡 笃 崩 游 遇 区 及 西 岛 、 贝 支 汶 岛 海上 乐园 等 著名 景点 - 


图 8.4 网 页 分 为 头 部 和 主体 内 容 两 个 部 分 


1. 头 部 
头 部 包括 网 页 标志 ， 如 


图 8.5 所 示 。 


震 与 贡 动 ; 姐 59 一 4 明 16 日 期 
转发 削 二 ! 护 想 位 在 三 开赴 山 岛 天 
人 
日 

癌 : 1 全 10To7F9EEkUE 兴 
ER 

2 


三 亚 半 山 半 岛 山 级 港 酒店 


从 


“三 亚 半山 半岛 帆船 港 酒店 ”的 效果 


戎 5 舌 动 ， :月 5 昌 一 介 16E 艾 同 
转 友 袜 二: 委任 宇 = 下 半山 半生 # 
趴 般 溢 酒店 # 束 要 由 海区 天 、 水 清册 
白 。 

富 : 加 入?0737 元 的 水 机 角 灶 
酒店 万 疹 。 

各: 本 办 活 动 计 出 吧 插 知 。 


三 亚 半 山 半岛 机 如 港 酒店 


人 
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尘 书 兰 忆 响 1 泪 天 声 


全 2012 eB pp 


图 8.5 网 页 头 部 


网 页 标志 是 一 张 背 景 图 片 ， 并 且 标志 上 有 指向 网 站 的 首页 或 主题 页 面 的 链接 。 
2. 主体 内 容 


主体 内 容 分 为 左右 两 栏 ， 左 栏 是 网 页 的 主要 内 容 ， 对 三 亚 半山 半岛 帆船 港 酒店 进行 了 介 
绍 ; 右 栏 包 含 两 个 模块 ， 分 别 是 “活动 细则 ”和 “三 亚 半山 半岛 帆船 港 酒店 ”， 如 图 8.6 所 示 是 
页 面 的 主体 内 容 。 


活动 细则 
活 自 环球 机 月 赛 办 于 1973 年 ， 是 全 到 旨 响 力 虹 大 的 专业 册 乱 赛 之 一 ， 拇 年 办 一 次 ,被 称 为 -级 海 的 珠 | sip: 4858_4 有 8156 
和 用"， 这 是 一 场所 9 个 多 月 8 上 马 拉 疤 ， 般 呈 们 于 起 五 大 消 四 大 洋 ， 向 人 区 耐力 的 要 限 和 出 找 霹 ， 三 。 || 多 :和 起 人 {= 下山 
亚 半 山 半 镶 由 册 港 看 店 星 2012 天 机 船 莫大 中 华 区 唯一 官方 指 定 接待 者 店 ， 员 向 港 淖 店 依 山 傍 海 ， 放 眼 极 
目 ， 贡 天 白云 区 诚 万 顺 ， 海 天 一 : 有 祝 怕 。 


4 月 5 日 一 4 月 16 日 期 间 竺 发 向 博 : 三 水 清 沙 白 一 并 @5 个 
天 源 好 友 ， 就 有 机 获得 价值 10797 元 的 三 号 请 关注 "天理 三 亚 -4 
三 亚 拥有 亚龙湾 、 天 涯 海 钊 游览 区 、 南 山 文化 旅游 区 、 大 小 洞天 风景 区 、 大 东海 风景 区 、 雇 回头 公园 、 
清风 曲 区 ， 党 特 条 济 览 区 及 西 乌 、 蚂 支 省 负 海 上 乐园 等 著名 景点 人 


三 亚 半山 半岛 机 向 港 酒店 


图 8.6 网 页 主体 内 容 


左 栏 的 主要 内 容 由 3 个 文字 段落 组 成 ， 如 图 8.7 所 示 。 


沃尔沃 环球 帆船 赛 创办 于 1973 年 ， 是 全 球 影响 力 最 大 的 专业 帆船 赛 之 一 ， 拇 四 年 举办 一 次 ， 被 称 为 "航海 的 珠 
称 让 到 峰 "， 这 是 一 场 历时 9 个 多 月 的 海上 马拉松 ， 船 员 们 要 跨越 五 大 洲 四 大 洋 ， 向 人 类 耐力 的 极限 发 出 挑战 。 三 
亚 半山 半岛 帆船 港 酒店 是 2012 沃 尔 沃 环球 帆船 赛 大 中 华 区 唯一 官方 指定 接待 酒店 ， 帆 船 港 酒店 依 山 傍 海 ， 放 眼 极 
目 , 蓝天 白云 短波 万 需 ， 海天 一 线 令 人 心旷神怡 。 


4 月 5 日 一 4 月 16 日 期 间 转 发 微 博 : 我 想 住 在 三 亚 半山 半岛 媳 \ 船 港 滞 店 # 享 受 壮 海蓝 天 、 水 清 沙 白 一 并 @5 个 
天 涯 好 友 ， 就 有 机 获得 价值 10797 元 的 三 张帆 船 港 酒店 房 券 。 还 请 关注 天 沽 三 亚 ”! 文字 段落 


区 、 南 山 文化 旅游 区 、 大 小 洞天 风景 区 、 大 东海 风景 区 、 许 回头 公园 、 三 亚 
文字 段落 


图 8.7 左 栏 


“活动 细则 ”包括 标题 和 活动 介绍 ， 如 图 8.8 所 示 。 


124 


se 第 8 章 高 度 自 适应 的 布局 


“三 亚 半山 半岛 帆船 港 酒店 ”包括 标题 和 酒店 标志 ， 如 图 8.9 所 示 。 
mm 


区 与 壬 动 : 4 月 5 日 一 4 月 16 日 期 间 -一 pr 4 二 
全 :入 在 = 于 册 总 三 亚 半山 半岛 机 姐 


相关 本 店 # 训 受 台 到 天 、 水 青 沙 
A 


酒店 标志 


图 8.8 活动 细则 半岛 帆船 港 酒店 


8.3.2 切 图 


页 面 在 Photoshop 中 的 切片 如 图 8.10 所 示 。 

切割 网 页 图 片 包括 logo.jpg、repeat-ypng、sanya_warp.jpg。logo.jpg 是 三 亚 半山 半岛 帆船 
港 酒店 模块 中 的 酒店 标志 ; repeat-y.png 是 网 页 主体 内 容 的 背景 图 片 ，sanya_warp.jpg 是 网 页 
banner 的 背景 图 片 。 


三 焉 半山 六 名 M6 汝 西口 


光 由 区 、 攻 加 和 从 到 机、 必 交 四 上 后 和 可 人 吉 。 


图 8.10 页 面 在 Photoshop 中 的 切片 


8.3.3 绘制 框架 图 
根据 前 面 对 网 页 效果 图 的 分 析 ， 绘 制 出 了 页 面 大 体 的 框架 图 ， 如 图 8.11 所 示 。 


图 8.11 页 面 框架 
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网 页 的 头 部 和 主体 内 容 在 整个 框架 图 中 从 上 而 下 按 顺 序 排列 ， 这 两 部 分 在 浏览 器 中 也 
从 上 到 下 按 顺 序 显示 。 框 架 图 中 的 头 部 对 应 效果 图 中 的 头 部 ， 主 体内 容 中 的 左 栏 对 应 效果 


网 六 


中 的 左 栏 ， 框 架 图 中 的 右 栏 对 应 效果 图 中 的 右 栏 。 


8.3.4 编写 XHTML 代码 


前 面 分 析 了 网 页 效果 图 ， 并 在 第 8.3.3 小 节 中 画 出 了 页 面 大 体 的 框架 图 ， 编 写 网 页 的 


XHTML 代码 如 下 。 

代码 8-5 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 三 亚 半山 半岛 帆船 港 酒店 </tit1le> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 

07 </head> 

08 <body> 

09 <xdiv id="hd"> 

10 <hl class="logo"><a href="index.html"” alt=" 天 涯 三 亚 新 年 贺礼 " 

title=" 天 涯 三 亚 新 年 贺礼 "> 三 亚 半 山 半岛 帆船 港 酒店 </a></h1> 

11 </div> 

12 <div id="bd" class="cf"> 

3 <div class="main fl"> 

14 <p> 沃 尔 沃 环球 帆船 赛 创办 于 1973 年 …… 海 天 一 线 令 人 心旷神怡 。</p> 

15 <p>4 月 5 日 一 4 月 16 日 期 间 转发 微 博 …… “三 本 "</p> 

16 <p> 三 亚 拥有 亚 龙 …… 蝇 支 洲 岛 海上 乐园 等 著名 景点 。 </p> 

Ly </div> 

18 <div class="side fr"> 

29 <div class="activity"> 

20 <h2> 活 动 细则 </h2> 

2 <p> 参 与 活动 : 4 月 5 日 一 4 月 16 日 期 间 转 发 微 博 : 
我 想 住 在 三 亚 半山 半岛 # 帆 船 港 酒店 # 享 受 自 海蓝 天 、 水 清 沙 白 。</p> 

22 <p> 奖 品 : 价值 10797 元 的 三 张帆 船 港 酒店 房 券 。</p> 

23 <p> 名 额 : 本 次 活动 将 送出 9 张 房 券 。</p> 

24 </div> 

25 <div class="contact"> 

26 <h2> 三 亚 半山 半岛 帆船 港 酒店 </h2> 

当 志 <a href="http://www.serenitymarinahotel .com" 
target=" blank"> 
<img src="images/logo.jpg"” alt=" 三 亚 半山 半岛 帆船 港 酒店 " 
title=" 三 亚 半山 半岛 帆船 港 酒店 ” /></a> 

28 </div> 

29 </div> 

30 </div> 

31 </body> 

32 </html> 


第 01 行 是 网 页 的 <!IDOCTYPE> 声 明 。<!DOCTYPE> 声 明 必须 是 HTMI 文 档 的 第 一 行 ， 位 
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于 <html> 标签 之 前 。 第 02 行 和 第 32 行 是 网 页 的 <html> 标 签 。<html> 标 签 可 告知 浏览 器 其 自身 
是 一 个 HTMI 文 档 。 

第 03~07 行 是 HTML 文 档 的 头 部 信息 。 第 03 行 和 第 07 行 是 <head> 标 签 。<head> 标 签 中 的 元 
素 可 以 引用 脚本 、 指 示 浏 览 器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 第 04 行 用 <meta> 标 签 定义 
网 页 的 编码 方式 是 utf-8。 第 05 行 是 网 页 的 标题 。 第 06 行 是 网 页 引用 的 样式 文件 地 址 。 

第 08~31 行 是 网 页 主体 ， 第 08 行 和 第 31 行 是 <body> 标 签 。<body> 标 签 用 于 定义 HTML 文 
档 的 主体 。 

第 09~11 行 是 网 页 头 部 ， 第 09 行 和 第 11 行 是 网 页 头 部 的 最 外 层 容 器 ， 使 用 了 <div> 标 签 ， 
这 个 容器 上 添加 了 id 是 hd 的 类 。 第 10 行 是 网 页 标志 ， 由 <h1> 标 签 包 含 “ 三 亚 半 山 半 岛 帆船 港 
酒店 ”组 成 ， 并 且 “ 三 亚 半 山 半岛 帆船 港 酒店 ”外 层 有 链接 ， 这 个 链接 指向 网 站 首页 。 从 前 
面 的 分 析 中 可 知 ， 网 页 标志 的 图 片 将 作为 背景 图 片 呈现 在 页 面 中 ，<a> 标 签 中 的 文字 可 有 可 
无 ， 但 是 为 了 更 好 的 用 户 体验 以 及 方便 搜索 引擎 抓 取 页 面 ，<a> 中 最 好 有 文字 ， 并 且 这 段 文 
字 应 该 体现 网 站 的 主题 思想 。 

第 12~30 行 是 网 页 的 主体 内 容 ， 第 12 行 和 第 30 行 是 主体 内 容 所 在 的 最 外 层 容 器 ， 使 用 了 
<div> 标 签 ，id 为 bd，class 类 为 cf。.cf 的 作用 是 为 了 使 #bd 容 器 能 包含 其 中 浮动 的 各 栏 。 

第 13~17 行 是 左 栏 ， 第 13 行 和 第 17 行 是 左 栏 的 最 外 层 容 器 ， 使 用 了 <div> 标 签 ， 该 容器 
上 添加 了 class 类 : main 和 纪 。 生 的 作用 是 使 左 栏 向 左 浮动 ， 从 而 使 左 栏 位 于 页 面 的 左边 。 第 
14~17 行 是 左 栏 中 的 3 段 文字 介绍 ， 由 <p> 标 签 包含 相关 文字 组 成 。 

第 18~29 行 是 右 栏 的 最 外 层 容 器 ， 使 用 了 <div> 标 签 ， 该 容器 上 添加 了 class 类 side 和 位 。 侠 
的 作用 是 使 右 栏 向 右 浮动 ， 从 而 使 右 栏 位 于 页 面 的 右边 。 

第 19~24 行 是 “活动 细则 ”， 第 19 行 和 第 24 行 是 “活动 细则 ”的 最 外 层 容器 ， 使 用 了 
<div> 标 签 ， 在 该 容器 上 添加 了 类 activity。 第 20 行 是 “活动 细则 ”的 标题 ， 由 <h2> 标 签 包含 
文字 “活动 细则 ”组 成 。 第 21~23 行 是 “活动 细则 ”中 的 3 段 文字 说 明 ， 分 别 由 3 个 <p> 标 签 包 
含 相关 文字 组 成 。 

第 25~28 行 是 “三 亚 半山 半岛 帆船 港 酒店 ”。 第 25 行 和 第 28 行 是 “三 亚 半 山 半岛 帆船 港 
酒店 ”的 最 外 层 容器 ， 使 用 了 <div> 标 签 ， 该 容器 上 添加 了 class 类 contact。 第 26 行 是 “三 亚 半 
山 半岛 帆船 港 酒店 ”的 标题 ， 由 <h2> 标 签 包含 文字 “三 亚 半 山 半 岛 帆船 港 酒店 ”组 成 。 第 27 
行 是 “三 亚 半山 半岛 帆船 港 酒店 ”的 标志 ， 由 <img> 标 签 引 入 标志 图 片 。 


8.3.5 编写 CSS 代 码 


根据 对 网 页 效果 图 和 XHTML 代 码 的 分 析 ， 编 写 网 页 的 CSS 代 码 如 下 。 
代码 8-6 


01 /*css reset*/ 
02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 


03 table{border-collapse:collapse; border-spacing:0;} 
04 ol,ul{list-style:none;} 

05 fieldset,img {border:0;} 

06 textarea{resize:none;} 

07 input:focus,textarea:focus {outline:none} 
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08 a{text-decoration:none;} 

09 a:hover{text-decoration:underline;} 

10 q:before, q:after{content:"'"';} 

11 abbr, acronym{border:0; font-variant:normal;} 

12 address,cite,dfn,optgroup,em,var{font-style:normal;} 

13 legend{color:#000;} 

14 .clear{clear:both;height:0;overflow:hidden;} 

15 .cf:after{visibility:hidden;display:block;font-size:0;content:""; 
clear:both;height:0;} 

16 *.cf{zoom:1;} 

17 /*global css*/ 

18 af{fcolor:#333;text-decoration:none;} 

19 a:hover{text-decoration:underline;} 

20 .fl{float:left;display:inline;} 

21 .fr{float:right;display:inline;} 

2 body{font-size:12px;color:#333;font-family:" 宋 体 "， Arial, Verdana, 
Geneva, Helvetica, sans-serif;background:url(../images/sanya warp.jpg) 
no-repeat center top #5bbbeb;padding:0 0 20px;} 

23 /*module css*/ 

24 #hd{width:950px;margin:0 auto;height:290px;position:relative;} 

25 hl{width:230px;height:100px;position:absolute;top:65px;right:75px;} 

26 hl a{display:block;width:100%;height:100%;text-indent:-999em;} 

27 #bd{background:url(../images/repeat-y.png) repeat-y 738px 0 #fff; 
width:948px;margin:0 auto;border:lpx solid #ald2f3;line-height:22px;} 

28 .main{width:738px;padding:30px 0;} 

29 .main p{line-height:30px;font-size:14px;text-indent:2em; 
padding:0 20px;margin:0 0 20px 0;} 

30 .side{width:190px;padding:0 1l0px;line-height:24px;} 

31 .side h2{font-size:14px;height:30px;line-height:30px;margin:0 0 1l0px 0;} 

32 .activity{padding:0 0 20px;} 

33 .contact{border-top:lpx solid #cee7f3;padding:0 0 20px;} 

34 .contact img{display:block;margin:0 auto;} 


CSS 文 件 由 3 部 分 组 成 ， 分 别 是 CSS 重 置 样式 、 公 共 样 式 和 模块 样式 。 第 01~16 行 是 CSS 
重 置 样式 ， 第 17~22 行 是 公共 样式 ， 第 23~34 行 是 模块 样式 。 通 过 CSS 重 置 代码 ， 对 相关 元 素 
的 内 外 边 距 、 字 体 、 字 号 等 的 重新 设置 ， 覆 盖 掉 各 浏览 器 中 有 可 能 不 一 样 的 默认 样式 ， 从 而 
提高 浏览 器 的 兼容 性 。 通 过 提取 网 页 中 的 公共 样式 ， 使 这 些 样式 能 够 重复 应 用 在 不 同 的 模块 
h， 提 高 CSS 代 码 的 利用 率 ， 减 少 CSS 文 件 大 小 并 缩短 开发 时 间 、 提 高 开发 效率 。 

第 01~16 行 的 详细 讲解 ， 请 参考 第 2 章 。 后 面 每 一 章 的 CSS 重 置 代码 都 是 一 样 的， 在 制作 
一 个 新 网 页 时 ， 可 以 先 把 这 部 分 CSS 样 式 复制 到 新 页 面 的 CSS 样 式 表 中 ， 再 开始 编写 新 页 
的 公共 样式 和 各 个 模块 的 样式 。 

第 18~19 行 定义 了 网 页 中 所 有 链接 的 样式 ， 分 别 设 置 了 颜色 、 下 划 线 是 否 显示 。 其 中 第 
18 行 中 的 text-decoration:none 表 示 页 面 中 的 所 有 链接 在 普通 状态 下 不 显示 下 划 线 ， 第 19 行 的 
text-decoration:underline 表 示 页 面 中 的 所 有 链接 在 鼠标 移入 时 显示 下 划 线 。 

第 20~21 行 分 别 定 义 了 两 个 通用 类 ， 即 人身 和 三 。 和 是 向 左 浮动 ， 伍 是 向 右 浮动 ， 其 中 
display:inline 用 于 解决 正 6 下 ， 浮 动容 器 左右 双 外 边 距 的 问题 。 

第 22 行 为 <body> 标 签 设 置 了 文字 大 小 是 12px， 文 字 颜 色 是 #333， 字 体 是 宋体 ， 行 高 是 


于 
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30px， 背 景 图 片 是 sanya_warp.jpg 和 内 边 距 。 

第 24 行 是 网 页 头 部 的 样式 ， 定 义 了 宽度 、 高 度 、 水 平 居中 和 相对 定位 。 

第 25 行 是 <h1l> 标 签 的 样式 ，<h1> 标 签 是 表示 网 页 的 标志 。<h1l> 标 签 的 样式 中 分 别 定义 了 
宽度 、 高 度 、 绝 对 定位 、 标 志 上 边缘 位 置 、 标 志 右 边缘 位 置 。 

第 26 行 是 标志 中 链接 的 样式 ， 定 义 了 链接 的 宽度 、 高 度 和 向 左 缩 进 999em。 其 中 。 
display:block 是 将 <a> 标 签 由 内 联 元 素 转换 成 块 元 素 ， 从 而 可 以 定义 <a> 标 签 的 宽度 和 高 度 。 
从 效果 图 中 可 以 知道 ， 网 页 的 标志 图 片 是 背景 图 片 ， 不 需要 在 页 面 中 显示 任何 文字 给 用 户 看 
到 。text-indent:-999em 可 以 将 <a> 标 签 中 的 文字 隐藏 掉 ， 使 之 不 出 现在 网 页 中 。 

第 27 行 是 主体 内 容 的 最 外 层 容器 的 样式 ， 定 义 了 容器 的 背景 图 在 Y 轴 方向 垂直 平 铺 、 容 
器 的 宽度 、 容 器 水 平 居中 、 容 器 的 边框 和 容器 中 元 素 的 行 高 。 

第 28 行 是 左 栏 的 样式 ， 定 义 了 宽度 和 内 边 距 。 第 29 行 是 左 栏 中 文字 段落 的 样式 ， 分 别 

定义 了 行 高 、 文 字 大 小 、 首 行 缩 进 2 个 汉字 、 内 边 距 和 外 边 距 。 第 30 行 是 右 栏 的 样式 ， 定 义 
了 宽度 、 内 边 距 和 行 高 。 第 31 行 是 右 栏 中 各 模块 的 标题 样式 ， 分 别 定 义 了 文字 大 小 、 标 题 高 
度 、 行 高 和 外 边 距 。 其 中 “height:30px:line-height:30px” 使 标题 中 的 文字 在 <h2> 标 签 中 垂直 
居中 显示 。 
第 32 行 是 右 栏 中 “活动 细则 ”的 样式 ， 定 义 了 内 边 距 。 第 33 行 是 右 栏 中 “三 亚 半山 半岛 
崔 船 港 酒店 ”的 样式 ， 定 义 了 上 边框 和 内 边 距 。 第 34 行 是 “三 亚 半山 半岛 帆船 港 酒店 ”中 图 
片 的 样式 ， 通 过 display:block 将 <img> 标 签 由 内 联 元 素 转换 成 块 元 素 ， 通 过 margin:0 auto 将 图 
片 沿 水 平方 向 居中 显示 。 


.4 小 结 


本 章 主要 讲解 了 高 度 自 适应 的 网 页 布局 的 实现 方法 ， 其 中 主要 介绍 了 两 种 方法 来 实现 这 
种 布局 ， 分 别 是 : 

e 正 负 内 外 边 距 。 

@ 为 父 容 器 添加 背景 图 。 

两 种 方法 各 有 优 劣 ， 读 者 可 以 根据 实际 项 目 需要 灵活 使 用 。 

最 后 通过 一 个 简单 的 案例 ， 进 一 步 讲解 了 如 何 对 这 类 页 面 进 行 网 页 布局 ， 加 深 了 对 本 章 
介绍 方法 的 理解 和 掌握 。 
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现在 ， 论 坛 类 的 网 站 形形色色 ， 主 要 是 通过 圈子 来 实现 用 户 的 自 
我 展现 和 用 户 之 间 的 相互 交流 。 
本 章 主要 涉及 到 的 知识 点 如 下 。 


@ 论坛 类 网 站 效果 图 分 析 : 将 页 面 拆 分 ， 对 每 个 模块 进行 分 
析 。 

@ 网 站 布局 规划 和 切 图 : 对 网 站 页 面 进行 布局 规划 和 切 图 ， 
并 导出 图 片 。 

e XHTML 编写 : XHTML 框架 搭建 ;网 站 公共 模块 的 
XHTML 编写， 各 页 面 主体 内 容 的 XHTML 编写 。 

@ CSS 编 写 : 网 站 公用 样式 的 编写 ; 网 站 公共 模块 的 CSS 编 
写 ; 网 站 框架 的 CSS 编 写 ; 各 页 面 主体 内 容 的 CSS 编 写 。 

日 制作 中 的 注意 事项 。 


9.1 页面 效果 图 分 析 


本 节 将 主要 对 网 站 效果 图 进行 分 析 ， 包 括 页 面 头 部 和 页 脚 分 析 、 首 页 主体 内 容 分 析 和 
内 页 主体 内 容 分 析 。 如 图 9.1 和 图 9.2 所 示 的 两 张 图 分 别 是 一 个 论坛 首页 和 论坛 帖子 页 的 效 


果 图 。 
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图 9.1 首页 
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图 9.2 帖子 页 


洛 首页 的 XHTML 页 面 表示 为 index.html， 除 首页 外 的 其 他 页 面 统称 为 内 页 。 


9.1.1 页 面 头 部 和 页 脚 分 析 


页 面 的 头 部 ， 如 图 9.3 所 示 ， 包 括 网 站 标志 、 来 吧 搜 索 以 及 网 站 导航 ， 分 别 对 应 图 中 的 
OO@. 

e 网 站 标志 : 由 背景 图 片 和 指向 首页 的 链接 组 成 。 

e 来 吧 搜索 : 包括 搜索 文本 框 标记 、 搜 索 文 本 框 和 搜索 按钮 。 
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@ 网 站 导航 : 由 若干 文字 链接 组 成 。 


ETE Bl Fos 


贸 一 : 2 


图 9.3 页 面 头 部 


页 脚 ， 如 图 9.4 所 示 ， 包 括 底部 导航 和 网 站 版 权 ， 分 别 对 应 图 中 的 OO 。 
@ 底部 导航 是 若干 文字 链接 。 
e 网 站 版 权 是 一 段 文字 。 


(1) 源 | 服务 条 款 | 网 站 地 图 | 联系 方式 | 广告 服务 | 版 权 和 隐私 | 招 英 才 | 友情 网 站 


图 9.4 页 脚 


9.1.2 首页 主体 内 容 分 析 


首页 的 主体 内 容 ， 如 图 9.5 所 示 ， 包 括 面包 屑 导航 、 主 要 内 容 以 及 侧 栏 ， 分 别 对 应 图 中 的 
OOG@.。 

在 布局 上 ，@ 位 于 主体 内 容 的 上 半 部 分 ，@ 和 @ 位 于 主体 内 容 的 下 半 部 分 。 其 中 ，@ 位 
于 左 栏 ，@ 位 于 右 栏 。 


| 
和 @ 


irkcy 国 


图 9.5 首页 的 主体 内 容 


其 中 : 


e 面包 悄 导 航 : 由 链接 和 文字 组 成 。 
@ 主要 内 容 : 包括 “来 吧 名 字 ”、 本 吧 帖 子 以 及 发 帖 ， 共 3 个 版 块 ， 分 别 对 应 图 中 的 ABC。 
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Ma 
Ma 
+ 


来 吧 名 字 和 包括 来 吧 图 片 和 来 吧 信息 介绍 。 

本 吧 帖 子 包 括 帖子 分 类 导航 、 帖 子 列表 和 帖子 分 页 。 

发 帖 包括 发 帖 提 示 和 发 帖 表 单 ， 其 中 表单 中 有 标题 、 内 容 、 插 图 和 “发 表 ” 按 
钮 ， 这 些 都 是 表单 元 素 ， 制 作 XHTML 页 面 时 用 form 标 签 包 衷 。 


@ 侧 栏 : 包括 “我 的 来 吧 ”、“ 关 于 本 吧 ”、“ 相 关 来 吧 ” 以 及 “创建 新 的 来 吧 ”， 
共 4 个 版 块 ， 分 别 对 应 图 中 的 DEFG。 


人 


* 
六 


我 的 来 吧 : 包括 版 块 标题 、 登 录 和 注册 链接 。 

关于 本 吧 : 包括 版 块 标题 、 吧 主 列表 、 本 吧 介 绍 、 申 请 吧 主 、 邀 请 链接 以 及 “ 申 
请 加 入 ”按钮 。 

相关 来 吧 : 包括 版 块 标题 和 来 吧 列 表 。 其 中 来 吧 列 表 包 括 来 吧 名 称 和 成 员 人 数 。 
创建 新 的 来 吧 : 是 一 个 创建 新 来 吧 的 按钮 。 


9.1.3 内 页 主体 内 容 分 析 


帖子 页 的 主体 内 容 ， 如 图 96 示 ， 包 括 面包 悄 导 航 、 主 要 内 容 和 侧 栏 ， 分 别 对 应 图 中 的 OOG@。 
在 布局 上 ， 与 首页 相似 ，@ 位 于 主体 内 容 的 上 半 部 分 ，@ 和 @ 位 于 主体 内 容 的 下 半 部 
分 。 其 中 ，@ 位 于 左 栏 ，@ 位 于 右 栏 。 


其 中 : 


图 9.6 内 页 的 主体 内 容 


e 面包 悄 导 航 与 首页 相同 ， 由 链接 和 文字 组 成 。 

e 主要 内 容 包 括 帖子 详细 内 容 、 帖 子 内 容 分 页 和 回帖 ， 共 3 个 版 块 ， 分 别 对 应 图 中 的 
ABC。 

日 侧 栏 包括 “我 的 来 吧 ”、“ 本 吧 热 门 讨论 ”和 “最 近 去 过 的 来 吧 ”， 共 3 个 版 块 ， 分 别 对 
应 图 中 的 DEF。 


133 


镶 、|DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


9.2 布局 规划 及 切 图 


本 节 将 主要 介绍 论坛 类 网 站 的 页 面 布局 规划 、 页 面 图 片 切割 并 导出 图 片 。 这 些 工 作 是 制 


作 本 章 案例 前 的 必要 步骤 。 


9.2.1 页 面 布局 规划 


根据 前 面 对 网 站 效果 


的 分 析 ， 为 了 后 面 写 出 清晰 简洁 的 XHTML 代码 ， 对 页 面 的 整体 


结构 进行 了 提炼 ， 得 到 了 页 面 的 大 致 布局 图 ， 如 图 9.7 所 示 是 首页 和 帖子 页 的 页 面 布 局 图 。 


图 9.7 页 面 布局 


9.2.2 切割 首页 及 导出 图 片 


首页 需要 切割 的 图 


片 有 : 网 站 标志 bulo_logo.gif、 网 站 导航 和 帖子 分 类 导航 背景 


图 sf_ 


x.png、 帖 子 分 类 导航 分 隔 背景 gap.gif、 网 站 按钮 合并 后 的 图 片 st bgpng、 网 站 小 图 标 amrowpng。 


临时 图 片 包括 来 吧 图 片 pimg60_60.jpg 和 网 友 头像 pimg50_50.jpg。 
如 图 9.8 所 示 是 首页 在 Photoshop 中 的 所 有 切片 。 


sf x.png 
‘1a, uespp ,irene 
.Te 


gap.gif ; 
1 和 


图 9.8 首页 在 Photoshop 中 的 所 有 切片 
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9.2.3 切割 内 页 及 导出 图 片 


帖子 页 需要 切割 的 图 片 有 : 网 站 小 图 


片 在 首页 中 已 经 切 过 了 ， 请 参见 第 9.2. 
如 图 9.9 所 示 是 帖子 页 在 Photoshop 

所 脑 一 家 难 

微软 、 黑 
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， 因 此 XHTML 的 编写 虽然 简单 但 很 


第 9 章 项 目 1 一 一 论坛 
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图 9.9 帖子 页 在 Photoshop 中 的 所 有 切片 
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标 arrow_down.png 和 dot.png。 帖 子 页 用 到 的 其 他 图 


XHTML 编 写 


本 节 将 详细 讲解 页 面 头 部 、 页 脚 、 页 面 公共 部 分 、 页 面 框架 和 每 个 页 面 的 XHTML 代 码 
的 编写 。 语 义 和 结 构 良好 的 XHTML 代 码 不 仅 在 制作 网 站 时 省 时 省 力 ， 更 有 利于 提高 网 站 排 


要。 


9.3.1 搭建 页 面 XHTML 框架 


hd 


首页 和 内 页 的 XHTML 框架 相同 ， 包 括 3 部 分 : 页 面 头 部 、 主 


bd 和 人 t。 XHTML 框架 的 代码 编写 如 下 。 


代码 9-1 


01 <xdiv id="doc"> 


02 <div id="hd"></div> 
03 <div id="bd" class=" 
04 <div id="ft"></div> 
05 </div> 


cf"></div> 


E 体 内容 和 页 脚 ，id 分 别 为 
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第 01 行 和 第 05 行 是 页 面 最 外 层 容器 。 第 02 行 是 页 面 头 部 。 第 03 行 是 页 面 主体 内 容 。 第 04 
行 是 页 脚 。 


9.3.2 编写 页 面 头 部 和 页 脚 的 XHTML 


根据 前 面 对 首 页 和 帖子 页 的 头 部 分 析 ， 网 站 标志 上 有 指向 网 站 首页 的 链接 ， 因 此 由 hl1 标 
签 包含 4 标 签 组 成 。 来 吧 搜索 包含 在 form 表 单 标签 中 ， 搜 索 文本 框 和 搜索 按钮 都 用 input 标 签 实 
现 ，type 分 别 是 text 和 submit。 网 站 导航 由 和 上 i 标签 包含 相关 导航 文字 链接 组 成 。 

编写 网 站 头 部 的 XHTML 代码 如 下 。 


代码 9-2 

01 <div id="hd"> 

02 <hl><a href="#n> 天 涯 来 吧 </a></hl> 

03 <div class="enter cf"> 

04 <form method="get" name="form" action="#"> 

05 <labe1> 快 速 进入 : </label><input type="text" name="enterbox" 
id="enterbox" class="enterbox"/><input type="submit™" 
name="submit" id="submit" class="submit" value=" 进 入 来 吧 "/> 

06 </form> 

07 </div> 

08 <ul class="cf"> 

09 <1i><a href="#"> 动 漫 </a></1i> 

10 <1i><a href="#"> 个 人 </a></1i> 

El <li><a href="#"> 行 业 </a></1i> 

2 <1i><a href="#"> 汽 车 </a></1i> 

13 <1i><a href="#"> 星 座 </a></1i> 

14 <1i><a href="#"> 时 尚 </a></1i> 

15 <1i><a href="#"> 校 园 </a></1i> 

16 <1i><a href="#"> 同 城 </a></1i> 

ly <1i><a href="#"> 财 经 c/a></1i> 

18 <1i><a href="#"> 影 视 </a></1i> 

19 <1i><a href="#"> 其 他 </a></1i> 

20 <1i><a href="#"> 车 友 会 </a></1i> 

2 <1i><a href="#"> 天 涯 产品 </a></1i> 

22 <1i><a href="#"> 旅 游 </a></1i> 

23 <1i><a href="#"> 股 票 </a></1i> 

24 <1i><a href="#"> 体 育 天 涯 </a></1i> 

25 <1i><a href="#"> 站 务 </a></1i> 

26 <li><a href="#"> 圈 子 </a></1i> 

有 <1i><a href="#"> 情 感 两 性 </a></1i> 

28 </ul> 

29 </div> 


第 01 行 和 第 29 行 是 首页 头 部 的 最 外 层 容 器 ，id 是 hd。 第 02 行 是 网 站 标志 。 第 03~07 行 是 来 
吧 搜 索 。 其 中 label 标 签 包含 表单 元 素 的 标注 。 第 08~28 行 是 网 站 导航 ， 是 一 个 ul 列表 。 每 个 li 
标签 中 包含 a 标签 ， a 标签 中 包含 导航 的 相关 文字 。 

根据 前 面 对 网 站 页 脚 的 分 析 ， 底 部 导航 由 若干 4 标签 包含 相关 导航 文字 组 成 ， 网 站 版 权 是 
一 段 文 字 。 编 写 这 部 分 的 XHTML 代码 如 下 。 
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代码 9-3 

01 <div id="ft"> 

02 <p><a href="#"> 关 于 天 涯 </a>1<a href="#"> 服 务 条 款 </a>1 
<a href="#"> 网 站 地 图 </a>|<a href="#"> 联 系 方式 </a>|<a href="#"> 
广告 服务 </a>1<a href="#"> 版 权 和 隐私 </a>|<a href="#"> 招 纳 英才 
</a>1<a href="#"> 友 情 网 站 </a></p> 

03 <p>ICP 证 琼 B2-20060032 号 </p> 

04 </div> 


第 01 行 和 第 04 行 是 页 脚 的 最 外 层 容器 ，id 是 f。 第 02 行 是 底部 导航 。 第 03 行 是 网 站 版 权 。 
9.3.3 编写 页 面 公共 部 分 的 XHTML 
在 本 章 的 案例 中 ， 页 面 的 公共 部 分 多 ， 除 了 页 面 头 部 和 页 脚 外 ， 还 包括 页 面 的 公用 模 


块 。 页面 的 公用 模块 包括 : 侧 栏 、 面 包 必 导航、 分 页 以 及 用 户 发 / 回 贴 ， 如 图 9.10 所 示 。 页 面 
头 部 和 页 脚 的 XHTML 代码 在 前 面 已 经 介绍 过 了 ， 这 里 不 再 发 述 。 


天 在 时 工作 这 ， 设 设 才 地 天 大 的 本 宙 


a 
a mm 
Rr 


有 反扑 时 。 的 作 
人 
Tm 说 2 


图 9.10 网 站 所 有 页 面 的 公共 部 分 


本 例 中 首页 和 帖子 页 的 侧 栏 内 容 虽 然 不 完全 相同 ， 但 是 论坛 网 站 的 页 面 还 有 很 多 ， 本 例 
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只 是 列举 其 


Ph2 个 页 面 作为 介绍 。 侧 栏 内 容 的 各 版 块 在 其 他 的 页 面 中 可 以 自由 组 合 。 


根据 前 面 对 首 页 和 帖子 页 侧 栏 内 容 的 分 析 ， 编 写 侧 栏 的 XHTML 代 码 如 下 。 


代码 9-4 


01 <xdiv class="sidecon"> 


02 
03 
04 
05 
06 
07 
08 
09 
10 
1 


之 


让 


14 
15 


16 
上 2 


18 
19 
20 
2 
22 
23 
24 
25 
26 
27 
28 
29 
30 
3 
3 
33 
34 
35 
36 
37 
38 
人 3 
40 


<div id="login"> 
<div class="hd"><h2> 我 的 来 吧 </h2></div> 
<div class="bd"> 请 先 <a href="#"> 登 录 </a> 或 <a href="#"> 注 册 </a></div> 
</div> 
<div id="about"> 
<div class="hd"><h2> 关 于 本 吧 </h2></div> 
<div class="bd"> 
<h4><a href="#"> 申 请 吧 主 &gt; ggt;</a> 吧 主 : </h4> 
<ul class="cf"> 
<li>a hreF- "><img sro="pimg/pimg50 50.jpg" at /></a> 
<a href="#"> 手 机 留 扑 </a></1i> 
<li>a hreE- ><img sro="pimg/pimg50 50.jpg" at /></a> 
<a href="#"> 大 江东 去 </a></1i> 
<li><a href="#"><ing src="pimg/pimg50 50.jpg" alt="" /></a> 
<a href="#"> 风 魔 死 镜 </a></1i> 
</ul> 
<p> 简 介 : 送礼 物 一 定 不 要 选 吃 的 ， 这 种 短暂 用 品 ， 吃 掉 了 就 忘记 了 。 
特别 俗 的 也 不 要 选 ， 会 让 其 他 人 感觉 不 被 重视 。</p> 
<div class="number"> 成 员 : <a href="#">97530</a> 人 </div> 
<div class="apply cf"><a href="#"> 邀 请 &gt; &gt;</a> 
<input type="button" name="applyjoin" 
id="applyjoin"” class="applyjoin" value=" 申 请 加 入 "/></div> 
</div> 
</div> 
<div id="related"> 
<div class="hd"><h2> 相 关 来 吧 </h2></div> 
<div class="bd"> 
<ul> 
<1li><span>2000 人 </span><a href="#"> 美 容 服饰 </a></1i> 
<li><span>700 人 </span><a href="#"> 时 尚 搭配 </a></1i> 
<1li><span>200670 人 </span><a href="#"> 女 人 </a></1i> 
<1i><span>2000 人 </span><a href="#"> 网 购 吧 </a></1i> 
<1li><span>1276 人 </span><a href="#"> 美 食 </a></1i> 
<li><span>8000 人 </span><a href="#"> 生 活 </a></1i> 
<li><span>7000 人 </span><a href="#"> 灯 箱 </a></1i> 


</ul> 
</div> 
</div> 
<div id="create"><a href="#"> 创 建新 的 来 吧 </a></div> 
<div id="popularvote"> 
<div class="hd"><h2> 本 吧 热 门 讨论 </h2></div> 
<div class="bd"> 
<ul> 
<1i><a href="#"> 天 窜 11 月 每 日 小 游戏 《彩色 爆 . . .</a></1i> 
<1i><a href=-"#"> 强 烈 要 求 两 家 老总 真人 PK</a></1i> 
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</ul> 
</div> 
</div> 


<div class="h 


<ul> 


</ul> 


</div> 
</div> 
65 </div> 
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<1i><a href="#"> 腾 讯 北 京 总 部 楼 下 真人 抗议 秀 ! </a></1i> 
<l1i><a hre 全 "4#"> 为 什么 “中 国 制造 ”在 美国 更 . . .</a></1i> 
<1i><a href="#"> 鱼 翅 是 这 样 炼 成 的 </a></1i> 

<1i><a href="#"> 天 使 脸 孔 魔鬼 身材 的 健美 小 姐 </a></1i> 
<1i><a href="#"> 腾 讯 北京 总 部 楼 下 真人 抗议 秀 ! </a></1i> 
<1i><a href="#"> 为 什么 “中 国 制造 ”在 美国 更 . . .</a></1i> 
<1i><a href="#"> 鱼 怒 是 这 样 炼 成 的 </a></1i> 


<div id="recentvisited"> 


d"><h2> 最 近 去 过 的 来 吧 </h2></div> 


<div class="bd"> 


<1i><span>2000 人 </span><a href="#"> 美 容 服 饰 </a></1i> 
<1i><span>700 人 </span><a href="#"> 时 尚 措 配 </a></1i> 

<li><span>200670 人 </span><a href="#"> 女 人 </a></1i> 
<1i><span>2000 人 </span><a href="#"> 网 购 吧 </a></1i> 
<li><span>1276 人 </span><a href="#"> 美 食 </a></1i> 
<li><span>8000 人 </span><a href="#"> 生 活 </a></1i> 


<p><a href="#"> 更 多 </a></p> 


第 01 行 和 第 65 行 是 侧 栏 最 外 层 容器 的 样式 。 第 02~05 行 是 “我 的 来 吧 ”。 其 中 第 03 行 是 


版 块 标题 ，class 为 hd 的 容器 中 包含 h2 标 
第 06~19 行 是 “关于 本 吧 ”， 其 中 


题 。 第 04 行 是 论坛 登录 和 注册 链接 。 
第 07 行 是 版 块 标题 ， 结 构 与 “我 的 来 吧 ” 版 块 的 标题 


一 样 。 第 09 行 是 “申请 吧 主 ”的 链接 和 “ 吧 主 ”标题 。 第 10~14 行 是 吧 主 列表 ， 即 一 个 ul 列 


表 ， 每 个 li 标签 中 包含 吧 主 的 头像 和 用 
的 个 人 主页 。 第 15 行 是 本 吧 介 绍 ， 利 月 


户 名 ， 头 像 和 用 户 名 都 带 有 链接， 指向 吧 主 在 本 论坛 


-时 
十 上 


请 加 入 ”和 “邀请 ”链接 。 


有 p 标 签 包含 相关 文字 。 第 16 行 是 本 吧 成 员 数 。 第 17 行 


第 20~33 行 是 “相关 来 吧 ”。 其 中 第 21 行 是 版 块 标题 。 第 23~31 行 是 来 吧 列 表 ， 即 是 一 个 
ul 列表 ， 每 个 li 标签 中 包含 来 吧 名 称 和 人 数 。 来 吧 名 称 带 有 链接 ， 指 向 相应 来 吧 的 首页 。 人 数 


span 标 签 包 诸 ， 位 于 来 吧 名 称 前 面 ， 


在 CSS 样 式 中 只 要 将 span 标 签 向 右 浮动 就 可 以 实现 页 面 


上 的 人 数位 于 每 个 i 标签 最 右面 的 布局 。 


第 34 行 是 “创建 新 的 来 吧 ”， 由 这 个 版 块 的 最 外 层 容器 <div id="create"></div> 包 含 a 链接 。 


第 35~50 行 是 “本 吧 热 门 讨论 ” 
个 ul 列表 ， 每 个 1 标签 中 包含 帖子 标题 ， 


第 51~64 行 是 “最 近 去 过 的 来 吧 ”， 


， 其 中 第 36 行 是 版 块 标题 。 第 38~48 行 是 帖子 列表 ， 即 一 


每 个 帖子 标题 都 带 有 链接 ， 指 向 相应 的 帖子 页 。 
其 中 第 52 行 是 版 块 标题 。 第 54~61 行 是 来 吧 列 表 ， 即 


一 个 ul 列表 ， 每 个 li 标签 中 包含 来 吧 名 称 和 人 数 ， 这 个 列表 的 结构 和 样式 与 相关 来 吧 中 的 来 吧 


列表 的 结构 和 样式 一 样 。 第 62 行 是 “更 多 ”和 链接， 指向 论坛 中 的 来 吧 聚 合 页 ， 从 而 使 该 页 面 


户 看 到 更 多 来 吧 。 


强 侧 栏 中 的 版 块 是 本 例 中 首页 和 帖子 
? 一 个 或 几 个 版 块 随意 组 合 。 


用 


页 中 所 有 侧 栏 版 块 的 集合 。 网 站 各 页 面 可 以 随意 将 侧 栏 中 的 
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根据 前 面对面 包 居 导 航 的 分 析 ， 编 写 这 部 分 的 XHTML 代 码 如 下 。 


代码 9-5 


01 <div id="crumbs"><a href="#"> 天 汰 来 吧 </a><span>&gt;</span> 
<a href="#"> 影 视 </a><span>&gt;</span><strong> 来 吧 名 称 </strong></div> 
02 <div id="crumbs"><a href="#"> 天 涯 来 吧 </a><span>&ggt;</span> 
<a href="#"> 影 视 </a><span>&ggt;</span><a href="#"> 来 吧 名 称 </a> 
<span>&gt;</span><strong> 浏 览 帖子 </strong></adiv> 


第 01 行 是 首页 的 面包 屑 导航 
导航 的 结构 和 样式 都 相同 ， 都 由 
的 层级 不 一 样 ， 因 此 a 标 签 的 数目 


。 第 02 行 是 帖子 页 的 面包 屑 导航 。 网 站 中 所 有 页 面 的 面包 局 


“<span>&gt;</span>” 将 每 个 文本 链接 分 隔 。 不 同 的 是 页 面 
可 能 不 一 样 。 


根据 前 面 对 分 页 的 分 析 ， 编 写 这 部 分 的 XHTML 代 码 如 下 。 


代码 9-6 

01 <xdiv id="page"> 

02 <a class="on">1</a> 
03 <a href="#">2</a> 
04 <a href="#">3</a> 
05 <a #">4</a> 
06 <a href="#">5</a> 
07 <span>…</span> 

08 <a href="#">10</a> 
09 <a href="#" class="next"> 下 一 页 &gt;&gt;</a> 
10 </div> 


第 01 行 和 第 10 行 是 分 页 的 最 外 层 容 器 ，id 是 page。 第 02~09 行 是 由 若干 8 链接 组 成 的 带 有 
链接 的 页 码 ， 其 中 第 07 行 是 分 页 中 的 省 略 号 ， 没 有 和 链接， 所 以 用 了 span 标 签 。 
根据 前 面 对 发 / 回 贴 的 分 析 ， 编 写 这 部 分 的 XHTML 代码 如 下 。 


代码 9-7 

01 <div id="messagebox"> 

02 <div class="tip"> 只 有 本 吧 成 员 才 能 在 本 吧 发 言 。 请 先 <a href="#"> 登 录 
</a>1<a href="#"> 注 册 </a> 后 发 帖 </div> 

03 <form method="post" name="forml" action="#"> 

04 <p><label1> 标 题 : </label><input type="text" name="enterbox" 


id="enterbox" class="enterbox" /></p> 


05 <p><label1> 内 容 : </label><textarea></textarea></p> 

06 <p><label1> 插 入 图 片 : </label><input type="file" name="file" id="file" 
class="file" /></p> 

07 <p><input type="submit" name="submit1"” id="submit1" 
class="submit1l"” value=" 发 表 "/></p> 

08 </form> 

09 </div> 


第 01 行 和 第 09 行 是 发 / 回 贴 的 最 外 层 容 器 ，id 是 messagebox。 第 02 行 是 发 帖 提 示 ， 除 了 文 
字 提 示 外 ， 还 包括 登录 和 注册 链接 。 第 03 行 和 第 08 行 是 包含 表单 元 素 的 form 标 签 。 第 04~07 行 
是 发 帖 的 表单 内 容 ， 包 括 input、textarea 和 file 等 表单 元 素 ， 分 别 构成 页 面 中 的 标题 、 内 容 、 插 
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内 容 可 以 随意 组 合 ， 例 如 在 本 例 中 ， 


第 9 章 项 目 1 一 一 论坛 


5 


回 


帖 比 发 帖 少 了 第 04 行 的 帖子 标题 。 


9.3.4 编写 首页 主体 内 容 的 XHTML 


根据 前 面 对 首 页 
代码 9-8 


主体 内 容 的 分 析 ， 编 写 首页 主体 内 容 的 XHTML 代码 如 下 。 


01 <xdiv id="bd"” class="cf"> 


02 <div 
03 <div 
04 
05 


06 
07 
08 
09 
10 
了 
上 


3 
14 


15 
16 
I 
18 
9 
20 
2 
2 


用 3 


24 
25 
26 
2 
28 
29 
30 
31 
32 
33 


id="crumbs">…</div> 
class="maincon cf"> 
<div id="personinfo"> 
<div class="personpic"><a href="#"> 
<img src="pimg/pimg60 60.jpg" alt="" /></a></div> 
<dl> 
<dt> 来 吧 名 字 </dt> 
<dd> 共 有 876076 个 主题 ，1011038 篇 帖子 ，18581 名 会 员 </dd> 
</dl> 
</div> 
<div id="gebacontent"> 
<div class="tabbutton" id="tabbtn"> 
<span class="curr"><a href="#"> 最 近 讨 论 </a></span> 
<span><a href="#"> 投 票 </a></span> 
<span><a href="#"> 精 华 </a></span></div> 
<div id="postslist"> 
<table cellspacing="0" cellpadding="0" 
class="postslist"> 


<tr> 
<th> 标 题 </td> 
<th> 作 者 </td> 
<th> 浏 览 /回复 </tad> 
<th> 最 后 回复 </td> 
二 WE 下 二 
<tr> 
<td class="title"><a href="#"> 
看 了 4 分 钟 的 片花 怎么 不 见 25 分 钟 的 花絮 啊 
</a></td> 
<td class="author"><a href="#"> 
再 梦 红楼 又 一 曲 </a></td> 
<td>100/20</td> 
<td>11-10</td> 
</tr> 
</table> 
</div> 
<div id="page">…</div> 


</div> 
<div id="messagebox"> 
<div class="tip">…</div> 


帖 的 结构 和 样式 都 相同 ， 对 于 表单 中 的 
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34 <form method="post" name="forml" action="#"> 

35 <p><label1> 标 题 :; </label><input type="text" 
name="enterbox" id="enterbox" class="enterbox" /></p> 

36 <p><label> 内 容 : </label><textarea></textarea></p> 

37 <p><labe1> 插 入 图 片 : </label><input type="file" 
name="file" id="file" class="file" /></p> 

38 <p><input type="submit" name="submitl" id="submit]l" 
class="submit1l" value=" 发 表 "/></p> 

39 </form> 

40 </div> 

4 下 </div> 

42 <div class="sidecon"> 

43 <div id="login">**</div> 

44 <div id="about">…</div> 

45 <div id="related">…</div> 

46 <div id="create">…</div> 

47 </div> 

48 </div> 


第 01 行 和 第 48 行 是 首页 主体 内 容 的 最 外 层 容 器 ，id 为 bd。 第 02 行 是 面包 屑 导航 。 第 03~41 行 
是 主要 内 容 。 第 04~10 行 是 “来 吧 名 字 ”。 其 中 第 05 行 是 来 吧 图 片 ， 第 06~09 行 是 dl 列表 ， 这 个 
dl 列表 包含 来 吧 的 文字 信息 ， 第 07 行 是 来 吧 名 称 ， 第 08 行 是 来 吧 的 主题 、 帖 子 和 会 员 介绍 。 

第 11~31 行 是 来 吧 帖 子 ， 其 中 第 12 行 是 来 吧 分 类 导航 ， 由 span 标 签 包含 分 类 导航 文字 链 
接 。 第 13~29 行 是 来 吧 帖 子 列表 ， 包 含 标题 、 作 者 、 浏 览 /回复 和 最 后 回复 ， 由 于 每 个 列表 项 


中 包含 的 内 容 比较 多 ， 并 且 从 效果 图 上 看 ， 所 有 列表 项 中 的 标题 、 作 者 、 浏 览 /回复 和 最 后 区 


复 的 宽度 都 是 相同 的 ， 所 以 用 table 标 签 制作 这 个 帖子 列表 比较 合适 。 第 30 行 是 分 页 。 
第 32~40 行 是 发 帖 。 第 和 2~47 行 是 侧 栏 。 侧 栏 中 有 4 个 版 块 ， 分 别 是 “我 的 来 吧 ”、“ 关 


于 本 吧 ”、“ 相 关 来 吧 ” 和 “创建 新 的 来 吧 ”。 相 关 XHTML 代 码 请 参见 第 9.3.3 节 。 


9.3.5 编写 内 页 主体 内 容 的 XHTML 
根据 前 面 对 内 页 主体 内 容 的 分 析 ， 编 写 内 页 主体 内 容 的 XHTML 代 码 如 下 。 


代码 9-9 

01 <div id="bd" class="cf"> 

02 <div id="crumbs">…</div> 

03 <div class="maincon cf"> 

04 <div id="replypost"> 

05 <h3> 我 在 苹果 工作 过 ， 说 说 老板 乔布斯 的 那些 事 </h3> 

06 <ul> 

07 <li Classs"ef"> 

08 <div class="photo"><a href="#"> 
<img src="pimg/pimg50 50.jpg" alt="" /></a> 
<a href="#"> 手 机 留 爪 </a></div> 

09 <dl> 

10 <dt> 楼 主 </dt> 

i <dd class="replycontent"> 

he <p>1989 年 


5 可 能 是 一 颗 定 时 炸弹 。</p> 
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<p> 前 不 久 ， 苹 果 公司 市 值 
ee 还 是 改革 航空 业 ? </p> 
</dd> 
<dd class="date replylink"> 
2010-10-24 15:12 <a href="# 回复 </a></ac> 
</dl> 


<li class="cf"> 


<div class="photo"><a href="#"> 
<img src="pimg/pimg50 50.jpg" alt=""/></a> 
<a href="#"> 手 机 留 爪 </a></div> 


<dl> 
<at>1 楼 </at> 
"replycontent"> 
<dd class="date replylink"> 
2010-10-24 15:12 <a href="#"> 
回复 </a></dd> 
</dl> 


<li class="cf"> 


<div class="photo"><a href="#"> 
<img src="pimg/pimg50 50.jpg" alt="" /> 
</a><a href="#"> 手 机 留 爪 </a></div> 
<dl> 
<dt>2 楼 </dt> 
<dd class="replycontent"> 
本 人 推荐 ee </dd> 
<dd class="date replylink"> 
2010-10-24 15:12 <a href="#"> 
回复 </a></dd> 
</dl> 


<1i class="cf"> 


<div class="photo"><a href="#"> 

<img src="pimg/pimg50 50.jpg" alt="" /> 

</a><a href="#"> 手 机 留 爪 </a></div> 

<dl> 
<dt>3 楼 </dt> 
<dd class="replycontent"> 值 得 学 习 </dd> 
<dd class="date replylink"> 
2010-10-24 15:12 <a href="#"> 
回复 </a></dd> 

</dl> 


<1i class="cf"> 


<div class="photo"><a href="#"> 

<img src="pimg/pimg50 50.jpg" alt=""/></a> 

<a href="#"> 手 机 留 扑 </a></div> 

<dl> 
<dt>4 楼 </dt> 
<dd class="replycontent"> 路 过 ……</dd> 
<dd class="date replylink"> 
2010-10-24 15:12 <a href="#"> 
回复 </a></dd> 
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48 </dl> 

49 x 

50 </ul> 

5 </div> 

52 <div id="page">…</div> 

53 <div id="messagebox"> 

54 <div class="tip">…</div> 

55 <form method="post" name="forml" action="#"> 

56 <p><label> 内 容 : </label><textarea></textarea></p> 

57 <p><label> 插 入 图 片 : </label> 
<input type="file" name="file" id="file" class="file" /></p> 

58 <p><input type="submit" name="submitl" id="submit1" 
class="submitl"” value=" 发 表 "/></p> 

59 </form> 

60 </div> 

61 </div> 

62 <div class="sidecon"> 

63 <div id="login">"*</div> 

64 <div id="popularvote">…</div> 

65 <div id="recentvisited">…</div> 

66 </div> 

67 </div> 


第 01 行 和 第 67 行 是 内 页 主体 内 容 的 最 外 层 容 器 ，id 是 bd。 第 02 行 是 面包 忆 导 航 。 第 03~61 
行 是 主要 内 容 。 第 04~51 行 是 帖子 详细 内 容 。 第 05 行 是 帖子 标题 ， 用 h3 标 签 包含 标题 的 文 


字 。 第 06~50 行 是 帖子 详细 内 容 列 表 ， 即 一 个 ul 列表 ， 每 个 li 标签 对 应 每 位 用 户 的 发 言 ， 其 中 
以 07~17 行 的 代码 为 例 ， 第 08 行 是 网 友 头 像 和 用 户 名 ， 第 09~16 行 是 一 个 dl 列表 ， 这 个 列表 中 


用 dt 标签 包含 


回 


第 53~60 行 是 
门 讨论 ”和 


帖 的 楼 层 ， 用 dd 标签 包含 回帖 内 容 、 回 帖 日 期 和 回复 链接 。 第 52 行 是 分 页 。 


回帖 。 第 62~66 行 是 侧 栏 。 侧 栏 中 有 3 个 版 块 ， 分 别 是 “我 的 来 吧 ”、“ 本 吧 热 
“最 近 去 过 的 来 吧 ”。 相 关 XHTML 代 码 请 参见 第 9.3.3 节 。 


9.3.6 总 览 首页 XHTML 代 码 


前 面 对 网 站 首页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 9.11 所 示 是 这 些 模块 组 
成 的 首页 XHTML 框 架 图 ， 说 明了 层 的 嵌 套 关系 。 


图 9.11 首页 XHTML 框 架 
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在 这 些 XHTML 代码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 首页 的 


完整 XHTML 代码 。 完 整 的 首页 XHTML 代码 如 下 。 


代码 9-10 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 首 页 </title> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <div id="hd">…</div> 

本 <div id="bd" class="cf"> 

工 2 <div id="crumbs">…</div> 

hE <div class="maincon cf"> 

14 <div id="personinfo">**</div> 
1 <div id="gebacontent">…</div> 
16 <div id="messagebox">…</div> 
Ln </div> 

18 <div class="sidecon"> 

JS <div id="login">**</div> 

20 <div id="about">…</div> 

这 出 <div id="related">…</div> 

加 <div id="create">…</div> 

23 </div> 

24 </div> 

25 <div id="ft">…</div> 

26 </div> 

27 </body> 

28 </html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 28 行 是 页 面 
的 html 标 签 ， 对 应 图 中 的 html{} 。 第 08 行 和 第 27 行 是 页 面 的 body 标 签 ， 对 应 图 中 的 body{}。 
第 09 行 和 第 26 行 是 页 面 最 外 层 容器 ， 对 应 图 中 #doc{}。 第 10 行 是 页 面 头 部 ， 对 应 图 中 #bd{}。 
第 11~24 行 是 页 面 主体 内 容 ， 对 应 图 中 的 #bd{}， 其 中 第 12 行 是 面包 悄 导 航 ， 对 应 图 中 的 


#crumbs{}， 第 13~17 行 是 主要 内 容 ， 对 应 图 中 的 .maincon{}， 
的 .sidecon{}， 第 14 行 是 来 吧 信 息 ， 对 应 图 


U 


#ft{}。 
9.3.7 总 览 内 页 XHTML 代 码 


前 面 对 内 页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 


的 #personinfo{}， 
中 的 #gebacontent{}， 第 16 行 是 发 帖 ， 对 应 图 中 的 #messagebox{}， 第 19 行 是 我 的 来 吧 ， 对 应 
图 中 的 要 ogin{}， 第 20 行 是 关于 本 吧 ， 对 应 图 中 的 #about{}， 第 21 行 是 相关 来 吧 ， 对 应 图 中 
的 #elated{}， 第 22 行 是 创建 新 的 来 吧 ， 对 应 图 中 的 #create{}。 


第 18~23 行 是 侧 栏 ， 对 应 图 中 
第 15 行 是 本 吧 帖 子 ， 对 应 图 


第 25 行 是 页 脚 ， 对 应 图 中 的 


图 9.12 所 示 是 这 些 模 块 组 成 的 
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内 页 的 XHTML 框架 图 ， 说 明了 层 的 嵌 套 关系 。 


图 9.12 内 页 的 XHTML 框架 


在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 内 页 的 
完整 XHTML 代码 。 完 整 的 内 页 XHTML 代码 如 下 。 


代码 9-11 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 关 于 我 们 </title> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <div id="doc"> 

10 <div idq="hd">…</div> 

LT <div id="bd" class="cf"> 

12 <div id="crumbs">…</div> 

3 <div class="maincon cf"> 

14 <div id="replypost">**</div> 
15 <div id="page">…</div> 

16 <div id="messagebox">…</div> 
hr </div> 

18 <div class="sidecon"> 

19 <div id="login">*</div> 

20 <div id="popularvote">…</div> 
21 <div id="recentvisited">…</div> 
22 </div> 

23 </div> 

24 <div id="ft">…</div> 

25 </div> 

26 </body> 

27 </html> 
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第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 27 行 是 页 面 


的 html 标 签 ， 对 应 图 中 的 html{} 。 第 08 行 和 第 26 行 是 页 面 的 body 标 签 ， 对 应 图 
第 09 行 和 第 25 行 是 页 
#hd{}。 第 11~23 行 是 页 面 主体 内 容 ， 对 应 图 中 的 #5d{}， 其 中 第 12 行 是 面包 届 导 航 ， 对 应 
的 #crumbs{}， 第 13~17 行 是 3 
的 .sidecon{}， 第 14 行 是 帖子 详细 内 容 ， 对 应 图 中 的 后 eplypost{}， 第 15 行 是 帖子 内 容 分 页 
回帖 ， 对 应 图 中 的 #messagebox{}， 第 19 行 是 我 的 来 吧 ， 对 应 


应 图 中 的 元 age{} ， 第 16 行 是 
中 的 才 ogin{}， 第 20 行 是 本 吧 热门 讨论 ， 对 应 图 中 的 却 opularvote{}， 第 21 行 是 最 近 去 过 的 来 
中 的 要 ecentvisited{}。 第 24 行 是 页 脚 ， 对 应 图 中 的 #ft{}。 


吧 ， 对 应 图 


本 节 将 了 


如 


回 


最 外 


层 容器 ， 对 应 图 中 的 #doc{} 。 第 10 行 是 页 面 头 部 ， 对 应 图 


FE 要 内 容 ， 对 应 图 中 的 .maincon{}， 第 18~22 行 是 侧 栏 ， 对 应 


中 


9.4 CSS 编 写 


9.4.1 页 面 公共 部 分 的 CSS 编 写 


页 面 公 共 部 分 包括 CSS 重 置 、 页 面 中 的 公 上 
头 部 和 页 脚 。 
页 面 头 部 和 页 脚 的 CSS 将 在 第 9.4.3 小 节 中 
块 的 CSS 代 码 编写 如 下 。 


加 


代码 9-12 


01 
02 


03 
04 
05 
06 


07 
08 
09 
10 
下 让 
4 
3 
14 


ls 


/*css reset*/ 
body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; 


padding:0;}/* 以 上 元 素 的 内 外 边 距 都 设置 为 0*/ 


*.cf{zoom:1;} /* IE 6/7 浏 览 器 (触发 hasLayout) */ 
/*global css*/ 
body{background:#fff;font-family: "宋体"， Arial, Verdana, Geneva, 
Helvetica, sans-serif;font-size:12px;color:#444;} 
a{color:#2965Bl1;text-decoration:underline;} 
a:hover{color:#f30;text-decoration:underline;} 

.red{color:red;} 
#doc{width:950px;margin:0 auto;} 

#bd .maincon{width:710px;float:left;} 

#bd .sidecon{width:230px;float:right;} 
#login{width:228px;border:lpx solid #c9dde7;} 

-hd h2{font-size:14px;line-height:28px;height:28px; 
padding-left:S5px;border-bottom:1lpx solid #dbeaef;border-top:lpx solid #fff; 
background:#eafSfa;} 
.bd{text-align:center;height:45px;line-height:45px; 


#login 


#login 


心 


要 讲解 论坛 类 网 站 的 CSS 编 写 ， 包 括 页 面 头 部 和 页 脚 、 首 页 和 内 页 的 CSS 编 写 。 


ph 的 body{}。 


图 


字体 、 字 体 颜 色 、 公 用 模块 的 样式 ， 以 及 页 


ph 编写 。CSS 重 置 代码 、 页 面 公共 样式 、 公 共 模 
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font-size:14px;} 

16 #login .bd a{fmargin:0 Spx; } 

17 #about{width:228px;border:lpx solid #c9dde7;margin-top:10px;} 

18 #about .hd h2{font-size:14px;line-height:28px;height:28px; 
padding-left:S5px;border-bottom:1lpx solid #dbeaef;border-top:1lpx solid #fff; 
background:#eafSfa;} 

19 #about .bd{padding:10px 0;} 

20 #about .bd h4{font-size:12px;font-weight:normal;padding:0 1l0px;} 

21 #about .bd h4 af{ffloat:right;} 

22 #about .bd ul{padding:10px 0 0 Spx;} 

23 #about .bd ul li{width:56px;height:85px;overflow:hidden;float:left; 
margin:0 8px;display:inline;text-align:center;} 

24 #about .bd ul li img{padding:2px;border:lpx solid #ccc; 
margin-bottom: 5px;} 

25 #about .bd p{line-height:18px;padding:0 10px;} 

26 #about .bd .number{padding:10px;} 

27 #about .bd .apply{padding:0 10px;} 

28 #about .bd .apply af{float:right;margin:3px 0 0 0;} 

29 #about .bd .apply input{background:url(../images/sf bg.png) 
no-repeat Opx -59px;width:75px;height:19px;cursor:pointer;border:0; 
color:#434343;} 

30 #related{width:228px;border:lpx solid #c9dde7;margin-top:10px;} 

31 #related .hd h2{font-size:14px;line-height:28px;height:28px; 
padding-left:S5px;border-bottom:lpx solid #dbeaef;border-top:lpx solid #fff; 
background:#eafSfa;} 

32 #related .bd ul{padding:5px 0 15px;} 

33 #related .bd ul li{padding:0 10px 0 22px;line-height:22px; 
background:url(../images/arrow.png) no-repeat 1l2px center; } 

34 #related .bd ul li span{float:right;color:#999;} 

35 #create{width:228px;border:lpx solid #c9dde7;margin-top:10px;} 

36 #create a{background:url(../images/sf bg.png) no-repeat 0 -26px; 
width:143px;height:33px;display:block;font-weight:bold; 
text-align:center;margin:10px auto;line-height:32px; 
text-decoration:none;letter-spacing:1lpx’;font-size:14px;} 

37 #popularvote{width:228px;border:lpx solid #c9dde7;margin-top:10px;} 

38 #popularvote .hd h2{font-size:14px; 
line-height:28px;height:28px;padding-left:5px;border-bottom:lpx solid #dbeaef; 
border-top:lpx solid #fff;background:#eafSfa;} 

39 #popularvote .bd ul{fpadding:10px 0;} 

40 #popularvote .bd ul li{padding:0 lO0px 0 22px;line-height:22px; 
background:url(../images/dot.png) no-repeat 12pX center; } 

41 #popularvote .bd ul li a{text-decoration:none;} 

42 #recentvisited{width:228px;border:lpx solid #c9dde7;margin-top:10px;} 

43 #recentvisited .hd h2{font-size:14px;line-height:28px; 
height:28px;padding-left:S5px;border-bottom:lpx solid #dbeaef; 
border-top:lpx solid #fff;background:#eafSfa;} 

44 #recentvisited .bd ul{fpadding:5px 0;} 

45 #recentvisited .bd ul li{padding:0 10px 0 22px;line-height:22px; 
background:url(../images/arrow.png) no-repeat 12px center #fff; } 

46 #recentvisited .bd ul 1i span{float:right;color:#999;} 

47 #recentvisited .bd p{text-align:right;padding:0 1l0px 1l0px 0;} 

48 #recentvisited .bd p a{text-decoration:none; 
background:url(../images/arrow down.png) no-repeat right center; 
padding-right:13px;} 

49 #crumbs{height:30px;font-size:12px;} 
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50 #crumbs a{text-decoration:none;} 

51 #crumbs a:hover{text-decoration:underline;} 

52 #crumbs span{padding:0 Spx;} 

53 #crumbs strong{font-weight:normal;} 

54 #messagebox .tip{background:#fffcd2;height:30px; 
line-height:30px;border:lpx solid #d4d4d4;text-align:center; 
margin-bottom:20px;} 

55 #messagebox .tip afmargin:0 Spx; } 

56 #messagebox p{ margin-bottom:10px;} 

57 #messagebox p label{float:left;margin:7px 0 0 0;width:80px; 
text-align:right;} 

58 #messagebox p .enterbox{width:514px;height:24px;line-height:24px; 
border:lpx solid #719cbb;padding:0 3px;font-size:12px; 
vertical-align:middle;} 

59 #messagebox p .submitl{background:url(../images/sf bg.png) 
no-repeat 0 0;width:83px;height:26px;border:0;font-size:14px; 
cursor:pointer;margin:lpx 0 0 lO0px;float:left;display:inline; 
margin-left:80px;} 

60 #messagebox p textarea{width:520px;height:200px;border:lpx solid #719cbb; 
font-size:1l2px;line-height:24px;} 

61 #page{padding:10px 0 20px;text-align:center;font-family:Arial;} 

62 #page a{display:inline-block;border:lpx solid #d6d6d6; 
text-decoration:none;height:21lpx;font-size:14px; 
line-height:2lpx;padding:0 6px;} 

63 #page a:hover{background:#2965bl;color:#fff;} 

64 #page a.next{width:68px;font-size:12px;} 

65 #page a.on{border:0;color:#444;font-weight:bold;} 

66 #page a.on:hover{background:#fff;color:#444;} 

67 #bd .maincon{width:710px;float:left;} 

68 #bd .sidecon{width:230px;float:right;} 


第 01~04 行 是 CSS 重 置 代码 。 第 05~09 行 是 网 站 用 到 的 公共 样式 ， 其 中 第 06 行 定义 了 body 
的 背景 色 、 字 体 、 文 字 大 小 和 文字 颜色 。 第 10 行 是 页 面 最 外 层 容 器 的 样式 ， 定 义 了 宽度 ， 并 
且 在 页 面 中 水 平 居中 。 第 11 行 是 页 面 主要 内 容 最 外 层 容器 的 样式 ， 定 义 了 宽度 和 向 左 浮动 。 
第 12 行 是 页 面 侧 栏 的 最 外 层 容器 的 样式 ， 定 义 了 宽度 和 向 右 浮动 。 第 13~48 行 是 侧 栏 各 模块 

第 13~16 行 是 我 的 来 吧 的 样式 。 其 中 第 13 行 是 这 个 模块 的 最 外 层 容器 的 样式 ， 定 义 了 模 
块 宽度 和 边框 。 第 14 行 是 模块 标题 的 样式 ， 定 义 了 标题 文字 大 小 、 标 题 高 度 、 行 高 、 内 边 
距 、 上 下 边框 和 背景 色 。 第 15~16 行 是 我 的 来 吧 的 主要 内 容 的 样式 ， 分 别 定 义 了 文字 居中 、 
高 度 、 行 高 、 文 字 大 小 和 文字 链接 的 左右 间距 。 

第 17~29 行 是 关于 本 吧 的 样式 ， 其 中 第 17 行 是 模块 最 外 层 容 器 的 样式 ， 定 义 了 模块 宽 
度 、 边 框 和 上 边 距 。 第 18 行 模块 标题 的 样式 。 第 19~29 行 是 模块 的 主要 内 容 的 样式 ， 其 中 第 
20 行 通过 font-weight:normal 将 h4 标 签 中 的 文字 设置 为 标准 字体 ， 取 消 字体 加 粗 。 第 21 行 通过 
float:right 将 h4 标 签 中 的 链接 “申请 吧 主 ”向 右 浮 动 。 第 22~24 行 是 吧 主 列表 的 样式 。 第 28 行 通 
过 floatright 将 链接 “邀请 ” 向 右 浮动 。 第 29 行 是 “申请 加 入 ”按钮 的 样式 。 

第 30~34 行 是 相关 来 吧 的 样式 ， 其 中 第 30 行 是 模块 最 外 层 容 器 的 样式 。 第 31 行 是 模块 标 
题 的 样式 。 第 32~34 行 是 模块 中 来 吧 列 表 的 样式 。 第 33 行 通过 background 设 置 了 来 吧 名 称 前 面 
的 箭头 图 标 。 第 34 行 通过 foat:right 将 来 吧 列 表 中 的 人 数 设置 为 向 右 浮动 。 

第 35~36 行 是 创建 新 的 来 吧 的 样式 ， 其 中 第 35 行 是 模块 最 外 层 容器 的 样式 。 第 36 行 是 创 
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建新 的 来 吧 按 钮 的 样式 ， 其 中 通过 display:block 将 a 链 接 行内 元 素 转换 成 块 元 素 ， 通 过 letter- 
spacing:1px 设 置 a 中 的 各 文字 之 间 的 间距 。 

第 37~41 行 是 本 吧 热 门 讨论 的 样式 ， 其 中 第 37 行 是 模块 最 外 层 容 器 的 样式 。 第 38 行 是 模 
块 标题 的 样式 。 第 39~41 行 是 模块 中 帖子 列表 的 样式 。 

第 42~48 行 是 最 近 去 过 的 来 吧 的 样式 ， 其 中 第 42 行 是 模块 最 外 层 容器 的 样式 。 第 43 行 是 
模块 标题 的 样式 。 第 44~46 行 是 来 吧 列表 的 样式 。 第 46 行 通过 float:right 将 span 标 签 设置 为 向 右 
浮动 ， 进 而 实现 了 来 吧 中 人 数 在 来 吧 名 称 右边 的 布局 。 第 47~48 行 是 链接 “更 多 ”的 样式 。 

第 49~68 行 是 主要 内 容 中 的 公共 模块 的 样式 。 第 49~53 行 是 面包 届 导 航 的 样式 。 第 49 行 
设置 了 面包 届 导 航 的 最 外 层 容器 的 高 度 和 该 容器 中 文字 的 大 小 。 第 50~51 行 设置 了 链接 的 样 
式 。 第 52 行 设置 了 各 层级 链接 之 间 的 分 隔 符号 “>” 的 左右 外 边 距 。 第 53 行 是 当前 页 面 所 在 
层级 的 样式 。 

第 54~60 行 是 发 /回帖 的 样式 。 第 54~55 行 是 发 / 回 贴 提示 的 样式 。 第 56 行 定义 了 各 表单 
元 素 所 在 p 容 器 之 间 的 垂直 间距 是 10 像 素 。 第 57 行 是 表单 中 所 有 表单 元 素 标注 的 样式 ， 通 过 
float:left 设 置 为 向 左 浮 动 ， 并 通过 “width:80px:textralign:right” 设 置 了 标注 的 宽度 和 文字 居 
右 ， 从 而 实现 了 效果 图 上 每 行 标注 右 对 齐 的 布局 。 第 58~60 行 分 别 定义 了 模块 中 的 文本 框 、 
“发 表 ” 按 钮 和 文本 区 域 的 样式 。 

第 61~66 行 是 分 页 的 样式 ， 其 中 第 62 行 通过 display:inline-block 将 a 标签 由 行内 元 素 设置 为 
类 块 级 元 素 ， 以 便于 后 面 通过 height 设 置 a 标签 的 高 度 。 第 67~68 行 分 别 是 主要 内 容 和 侧 栏 的 最 
外 层 容 器 的 样式 。 分 别 定义 了 宽度 、 向 左 浮动 和 向 右 浮动 。 


9.4.2 页 面 框架 的 CSS 编 写 


前 面 分 析 了 页 面 的 布局 图 并 且 编 写 了 页 面 框架 的 XHTML 代码 ， 根 据 这 两 部 分 编写 页 面 
框架 的 CSS 代 码 如 下 。 


代码 9-13 


01 #doc{width:950px;margin:0 auto;} 
02 #hd{margin-bottom:10px;} 
03 #ft{text-align:center;color:#cbcbcb;padding:25px 0 10px;} 


第 01 行 是 页 面 最 外 层 容器 的 样式 。 第 02 行 是 页 面 头 部 最 外 层 容 器 的 样式 。 第 03 行 是 页 肢 
最 外 层 容器 的 样式 。 


9.4.3 页 面 头 部 和 页 脚 的 CSS 编 写 
前 面 分 析 了 页 面 头 部 并 且 编 写 了 这 部 分 的 XHTML 代 码 ， 页 面 头 部 的 CSS 代 码 如 下 。 
代码 9-14 


01 #hd{**…} 

02 #hd hl{background:url(../images/bulo logo.gif) no-repeat;width:151px; 
height:53px;float:left;margin:10px 0 14px 0;} 

03 #hd hl a{width:100%;height:100%;text-indent:-9999em;display:block;} 

04 #hd .enter{width:740px;float:left;margin:26px 0 0 55px; 
display:inline;font-size:14px;} 
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05 #hd .enter label{float:left;margin:5px 0 0 0;} 

06 #hd .enter .enterbox{width:284px;height:20px;border:lpx solid #7f9db9; 
padding:3px;font-size:14px;float:left;} 

07 #hd -enter .submit{background:url(../images/sf bg.png) no-repeat 0 0; 
width:83px;height:26px;border:0;font-size:14px;cursor:pointer; 
margin:lpx 0 0 lOpx;float:left;display:inline;} 

08 #hd ul{clear:both;background:url(../images/sf x.png) repeat-x 0 0; 
border:lpx solid #bcd2e9;width:943px;height:29px;padding:0 0 0 Spx; 
line-height:29px; } 

09 #hd ul li{float:left;padding:0 9px;} 

10 #hd ul 1i a{text-decoration:none;} 

11 #hd ul li a:hover{color:#444;} 

12 #hd ul li a.cur{color:#434645;} 


第 01 行 是 页 面 头 部 的 最 外 层 容器 的 样式 。 第 02~03 行 是 网 站 标志 的 样式 ， pre 
通过 background 设 置 标志 的 背景 图 ， 通 过 float:left 将 网 站 标志 设置 为 向 左 浮动 。 第 03 行 
display:block 将 a 标签 由 行内 元 素 转 换 成 块 元 素 ， 通 过 “width:100%:;height:100%” 2 
度 和 高 度 与 父 容器 hl 的 相同 ， 通 过 text-indent:-9999em 将 a 标签 中 的 文字 隐藏 。 

第 04~07 行 是 来 吧 搜索 的 样式 ， 其 中 第 04 行 通过 float:left 将 来 吧 搜 索 所 在 的 容器 设置 为 向 

左 浮动 ， 通 过 display:inline 解 决 了 IE 6 下 左右 双 外 边 距 的 问题 。 第 05 行 通过 float:left 将 表单 元 

ee “快速 进入 ”设置 为 向 左 浮动 。 第 06 行 通过 float:left 将 来 吧 搜索 文本 框 设置 为 向 

浮动 。 第 07 行 通过 background 设 置 了 “进入 来 吧 ” 按 钮 的 背景 图 ， 通 过 float:left 设 置 了 按钮 
hy 通过 display:inline 解 决 了 IE 6 下 左右 双 外 边 距 的 问题 。 

第 08~12 行 是 网 站 导航 的 样式 ， 其 中 第 08 行 J 了 通过 clear: both 设 置 了 在 导航 的 左右 两 侧 均 不 
允许 浮动 元 素 ， 也 就 是 说 导航 在 页 面 中 是 单独 一 行 展示 的 。 第 12 行 是 当前 选中 的 导航 样式 。 

根据 前 面 对 页 脚 和 这 部 分 XHTML 代码 的 分 析 ， 编 写 页 脚 CSS 代 码 如 下 。 


代码 9-15 


OT ft 

02 #ft afmargin:0 8px;text-decoration:none;} 
03 #ft a:hover{text-decoration:underline;} 
04 #ft p{color:#999;line-height:30px;} 


第 01 行 是 页 脚 最 外 层 容器 的 样式 。 第 02~03 行 是 页 脚 中 所 有 链接 的 样式 。 第 04 行 是 网 站 
版 权 的 样式 。 


9.4.4 首页 主体 内 容 的 CSS 编 写 


根据 对 首页 主体 内 容 和 这 部 分 XHTML 代 码 的 分 析 ， 编 写 首页 主体 内 容 的 CSS 代 码 如 下 。 
代码 9-16 


01 #personinfo{height:78px; } 

02 #personinfo dlf{float:left;} 

03 #personinfo dt{font-size:14px;font-weight:bold;padding:8px 0 15px 10px;} 

04 #personinfo dd{font-size:1l2px;padding:0 0 0 10px;color:#676767;} 

05 #personinfo .personpic img{float:left;width:60px;padding:2px; 
border:lpx solid #ddd;} 

06 #gebacontent{width:710px;border-top:lpx solid #c9dde7;} 
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07 #gebacontent .tabbutton{width:688px;background:url(../images/sf x.png) 
repeat-x 0 -29px;height:30px;border-left:1lpx solid #c9dde7; 
border-right:lpx solid #c9dde7;padding:0 0 0 20px;} 

08 #gebacontent .tabbutton span{display:inline-block; color:#2965b17 
font-size:14px;height:30px;line-height:30px;background:url 
("../images/gap.png") no-repeat right center; padding:0 20px;} 

09 #gebacontent .tabbutton .curr{color:#444;background:#fff;} 

10 #gebacontent .tabbutton a{text-decoration:none;} 

11 .postslist{width:710px;color:#666;margin:0 auto 20px;} 

12 .postslist th{font-weight:normal;font-size:12px;background:#f5f5f5; 
text-align:left;line-height:31lpx;} 

13 .postslist td{line-height:30px;} 

14 .postslist td.title{font-size:14px;background:#fff;} 

15 .postslist td.author{width:110px;} 

16 .postslist td.author a{font-size:12px;text-decoration:underline; 
color:#666;} 


第 01~05 行 是 来 吧 信息 的 样式 ， 其 中 第 02 行 通过 float:left 将 来 吧 的 文字 信息 所 在 的 dl 标签 
设置 为 向 左 浮动 。 第 05 行 通过 float:left 将 页 面 中 展示 来 吧 图 片 的 mg 标签 设置 为 向 左 浮动 。 通 
过 第 02 行 和 第 05 行 的 两 个 foat:left， 实 现 了 来 吧 信息 中 图 片 在 左边 ， 信 息 文字 在 右边 的 布局 。 

第 06 行 是 来 吧 帖 子 最 外 层 容器 的 样式 。 第 07~10 行 是 来 吧 帖 子 中 的 分 类 导航 的 样式 。 第 

行 是 分 类 导航 最 外 层 容器 的 样式 。 第 08 行 是 每 个 导航 的 样式 ， 其 中 通过 display:inline-block 
RS 签 由 和 行内 元 素 转换 成 类 块 元 素 ， 以 便 后 面 通过 height 设 置 高 度 。 第 09 
行 是 当前 选中 导航 的 样式 。 第 10 行 是 导航 中 文字 链接 的 样式 。 

第 11~16 行 是 来 吧 帖 了 列表 的 样式 。 第 12 行 通过 font-weight:normal 将 也 中 默认 的 粗 体 文字 
转换 成 标准 未 加 粗 的 文字 。 第 14 行 是 帖子 的 标题 所 在 的 td 样式 。 第 15 行 是 帖子 的 作者 所 在 的 
td 样式 。 第 16 行 是 作者 的 链接 样式 。 


9.4.5 内 页 主体 内 容 的 CSS 编 写 


根据 对 内 页 主体 内 容 和 这 部 分 XHTML 代码 的 分 析 ， 编 写 内 页 主体 内 容 的 CSS 代 码 如 下 。 
代码 9-17 


01 #replypost{ margin:0 0 5px 0;} 

02 #replypost ul li{padding:12px 0;border-bottom:lpx solid #e7e7e77 } 

03 #replypost ul li .photo{width:56px;float:left;text-align:center;} 

04 #replypost ul li .photo img{padding:2px;border:lpx solid #ccc; 
margin-bottom: 5px;} 

05 #replypost ul li .photo a{display:block;} 

06 #replypost ul li dl{padding:0 l0px 0 75px;} 

07 #replypost ul li dl dt{font-size:12px;text-align:right; 
padding-bottom: 5px;} 

08 #replypost ul li dl dt a{margin-right:10px;} 

09 #replypost ul li dl dd.replycontent{font-size:14px; 
line-height:24px;padding:0 0 20px 0;} 

10 #replypost ul li dl dd.date replylink{font-size:12px;text-align:right; 
height:15px;} 

11 #replypost .replycontent p{text-indent:2em;margin:0 0 30px;} 

12 #replypost h3{font-size:14px;} 
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第 01 行 是 帖子 详细 内 容 最 外 层 容 器 的 样式 。 第 02 行 是 每 一 楼 的 帖子 样式 。 第 03~05 行 是 月 
容器 设置 为 向 左 浮动 ， 


户 名 的 样式 ， 其 


第 9 章 项 目 1 一 一 论 


|] 


hp 第 03 行 通过 float:left 将 头像 和 用 户 名 所 在 的 


户头 像 和 


通过 text-align:center 将 用 户 名 设置 为 在 该 容器 中 居中 显示 。 第 05 行 通过 display:block 将 用 户 名 


链接 所 在 的 a 标签 


行内 元 素 转换 成 块 元 素 ， 从 而 实现 了 上 


户头 像 和 用 户 名 各 占 一 行 显示 的 布 


局 。 第 06~11 行 是 


沾 子 楼 层 、 回 帖 内 容 、 回 帖 时 间 和 链接 “ 民 


复 ” 组 成 的 dl 列表 样式 ， 其 中 第 07 


行 是 帖子 楼 层 所 在 的 dt 标签 样式 ， 通 过 text-align:right 将 楼 层 设置 为 居 右 显示 。 第 10 行 通过 text- 


align:right 将 回帖 时 间 和 和 链接“ 


9.4.6 网 站 CSS 代 码 总 览 


前 面 讲 解 了 页 面 头 部 
些 代码 共同 组 成 了 网 站 页 面 的 完 
代码 9-18 


@charset "utf-8"7 
人 reset*/ 


gob css*/ 


/*module css*/ 
/*index.html*/ 
#Personinfo{…} 
#personinfo dl1{…} 


/*page.html*/ 
#replypost{"*…} 
#replypost ul 1i{…)} 


每 段 文字 首 行 缩 进 2 个 汉字 。 第 12 行 重新 设置 了 h3 的 文字 大 小 ， 


、 页 脚 、 页 面 主体 内 容 、CSS 重 置 和 页 面 
整 CSS 代 码 ， 如 代码 9-14 所 示 。 


回复 ”设置 为 居 右 显示 。 第 11 行 通过 text-indent:2em 将 回帖 内 容 的 


覆盖 了 默认 的 h3 的 文字 大 小 。 


公共 模块 的 CSS 代 码 ， 这 


-十 省 略 的 代码 在 每 个 小 节 中 都 有 讲解 ， 这 里 不 再 商 术 。 


9.5 制作 中 需 


9.5.1 网 站 文件 规划 


注意 的 问题 


一 般 情 况 下 ， 一 个 网 站 的 文件 


css、images、temp、js 这 几 个 文件 夹 及 若干 HTML 文件 组 


成 。ess 文 件 夹 存放 网 站 的 CSS 文 件 ， 
站 的 banner、 网 站 标志 等 不 经 常 更 换 
久 图 片 是 相对 的 ， 


images 文 件 夹 存放 网 站 的 永久 图 片 ， 永 久 图 片 是 指 一 个 


是 指 网 站 中 需要 运营 人 员 & 


的 图 片 ，temp 文 件 夹 存 放 网 站 的 临时 图 片 ， 临 时 图 片 和 永 
经 常 更 换 的 图 片 ， 包 括 专题 页 面 的 图 片 、 产 品 优惠 
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图 片 等， 这 些 图 片 随 着 活动 的 结束 或 时 间 的 推移 ， 需 要 运营 人 员 每 隔 一 段 时 间 就 更 新 一 次 。 

js 文件 夹 存放 的 是 网 站 需要 引用 的 JavaScript 文 件 ， 用 于 实现 网 站 的 交互 和 动画 。 

在 每 个 新 站 点 制作 前 ， 都 需要 先 把 这 些 文件 夹 建 立 好 ， 将 CSS、 图 片 、JavaScript 文 件 存 
放 到 相应 的 文件 夹 中 ， 以 便 制 作 时 能 够 正确 引用 其 路 径 。 如 图 9.13 所 示 是 网 站 的 相关 文件 和 
路 径 关 系 。 


名 称 修改 日 期 大 小 

用 css 2013/11/4 15:18 

Bimages 2013/11/4 15:17 

js 2013/116 14:18 

temp 2013/11/5 10:09 

| 夸 indexhtml 2013/11/4 15:13 3KB 
帮 producshtml 2013/11/5 13:13 4KB 
EE :ervices.html 2013/115 13:14 ”HTML 文件 3 KB 


图 9.13 网 站 的 相关 文件 和 路 径 关系 


9.5.2 CSS 样 式 规划 


网 站 中 所 有 用 到 的 CSS 样 式 文件 都 存放 在 css 文 件 夹 中 ， 大 型 网 站 有 许多 CSS 文 件 ， 包 括 
网 站 的 通用 CSS 文 件 、 每 个 频道 的 CSS 文 件 等 。 

企业 网 站 ， 页 面 较 少 ,而且 3 个 页 面 中 有 许多 相似 的 模块 ，CSS 样 式 可 以 通用 ， 因 此 
放 到 一 个 CSS 文 件 中 即 可 ，CSS 文 件 由 3 个 部 分 组 成 。 


@ 最 开始 是 CSS 重 置 代码 ， 即 /*css reset*/ 代 码 ， 这 部 分 代码 用 于 重 置 浏览 器 的 CSS 默 认 
属性 。 因 为 浏览 器 的 品种 很 多 ， 每 个 浏览 器 的 默认 样式 也 是 不 同 的 ， 例 如 <button> 标 
签 ， 在 IE 浏览 器 、Firefox 浏 览 器 以 及 Safari 浏 览 器 中 的 样式 都 是 不 同 的 ， 所 以 ， 通 过 
重 置 button 标 签 的 CSS 属 性 ， 再 将 它 统 一 定义 ， 就 可 以 产生 相同 的 显示 效果 。 

日 中间 的 是 /*global css*/， 这 部 分 代码 用 于 页 面 中 的 公用 样式 ， 一 般 情况 下 ， 头 部 和 页 
脚 是 完全 相同 的 ， 内 容 部 分 的 标题 颜色 、 字 体 、 字 体 间距 都 是 相同 的 ， 文 字 的 行 间 
距 相同 ， 文 字 所 用 到 的 颜色 包括 绿色 、 蓝 色 、 深 蓝 色 ， 这 些 都 可 以 公用 。 根 据 上 面 
这 些 信 息 ， 编 写 的 CSS 样 式 ， 作 为 网 站 的 global css。 

e@ 最 后 是 各 模块 自己 的 样式 ， 这 些 样 式 不 可 以 复 用 ， 每 个 都 是 独一无二 的 。 这 部 分 是 
/*module css*/， 放 在 CSS 文 件 的 最 后 。 
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项 目 2 一 一 下 
电子 政务 网 站 


电子 政务 网 站 是 以 报道 电子 政务 资讯 、 电 子 政务 研究 动态 、 电 子 政务 
产品 、 电 子 政务 方案 为 主导 ， 关 注 政府 、 城 市 、 社 区 、 企 业 等 领域 的 信息 
化 资讯 ， 服 务 于 中 国政 府 和 电子 政务 企业 商用 需求 的 网 站 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


日 ”电子 政务 网 站 效果 图 分 析 : 将 页 面 拆 分 ， 对 每 个 模块 进行 分 析 。 

e@ 网 站 布局 规划 和 切 图 : 对 网 站 页 面 进行 布局 规划 和 切 图 ， 并 导 
出 图 片 。 

e XHTML 编写 ， XHTML 框架 搭建 ， 网 站 公共 模块 的 XHTML 编 
写 ; 各 页 面 主 体内 容 的 XHTML 编写 。 

@ CSS 编写 : 网 站 公用 样式 的 编写 ; 网 站 公共 模块 的 CSS 编 写 ; 
网 站 框架 的 CSS 编 写 ; 各 页 面 主体 内 容 的 CSS 编 写 。 

”制作 中 的 注意 事项 。 


本 章 将 主要 讲解 电子 政务 网 站 的 DIV+CSS 页 面 制作 。 以 山西 省 人 民政 府 驻 北京 办 事 处 网 站 为 
例 ， 运 用 DIV+CSS 技 术 进行 了 网 站 重 构 。 电 子 政务 网 站 的 页 面 一 般 设计 大 方 、 庄 重 、 不 会 太 花 
哨 、 格 调 比较 明朗 。 网 站 重 构 时 ， 在 结构 、 导 航 等 多 方面 有 较 大 的 规范 性 和 统一 性 。 


1 有 
如 峰 


10.1 页 面 效 果 图 分 析 


本 节 将 主要 对 网 站 效果 图 进行 分 析 ， 包 括 页 面 头 部 和 页 脚 分 析 、 首 页 主体 内 容 分 析 和 内 
页 主体 内 容 分 析 。 下 面 的 两 张 图 分 别 是 截取 现在 山西 省 人 民政 府 驻 北 京 办 事 处 的 首页 和 驻 京 
办 介绍 页 的 页 面 ， 如 图 10.1 和 图 10.2 所 示 。 


镶 、|DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


领导 介绍 


F* hy 


“ 京 当 其 重 本 高速 公 路 本 月 将 实现 区域 联网 不 停车 忆 吏 
“山西 省 出 各 多 项 新 规 为 民营 医院 发 展 铺 路 

“山西 丫 力 解 天 词 铁 个 化 水 泥 电 前 要 行 上 产能 过 利 
"山西 文 化 肖 焉 薪 意 度 超 域 京 津 居 首 位 

“第 五 届 苗 商 年 半年 底 在 宗 举 行 

“山西 省 51 个 食品 品牌 甘 评 “百姓 最 竹 心 ” 

"十 一 蓝 金 周 皇 城 相 府 | ] 票 收入 3524 万 元 

“重金 周 山西 这 游 吸金 153 亿 元 增长 26.49% 


| 教育 实 跨 震动 更 名 > 
中 省 委 常 委 会 召开 教 诊 实 跳 医 动 志 
昌吉 纯 青 ; 厚 育 实 跳 舌 动 要 傣 好 “， 
由 责 纬 青 ， 宣传 困 相 工作 要 三 起 来 
昌 活 少 出 席 部 分 省 直 单位 航 育 3 
山西 对 这 办 学 办 群 人 路线 才 育 实 


| 招商 引资 


日 第 三 届 农 情 会 车 幕 答 约 投资 总 莉 
昌 山西 贡生 全 事业 单位 ,个 人 才 与 
昌 我 洛 利 用 台 资 实 碘 30 亿 半 元 

昌 全 省 农村 流通 外 圈 35T0 万 元 支持 
9 上 半年 山西 高 加 公路 建设 累计 投 


机 构 设置 
在 京 企业 


招商 引 
联系 我 们 


机 六 区 本 得 

和 志 不 人 国有 守 取 系 向 导 放 本 沁 :坚定 信访 悦 间 坟 了 全面 化 国有 
- 吝 建 在 大 大 市 社会 儿 重 福 各 于 .我 省“ 十 三 五 " 电 同 规划 蕴 人 so 二 估 所 目 
“各 | 听 二 玫 小 寺 接 由 全 运 会 册 西 代表 拉动 人 

- 吝 寻 民 看 旦 内 会 和 要 人 员 -中 号 征 X 放 组 从 讽 山西 省 工作 动员 全 如 
"学 4 晶 : 坚 潜 藻 实 中 央 块 第 部 署 半 线 孙 蔷 空气 环境 质量 “山西 省 课 障 性 安居 工程 提前 完 或 全 年 任务 
“各 二手 小 出 看 记 人 同和 协 天 主 请 展 工行 - 沪 企 最 名 二 站 传 按 特 产 “得 味 ”中 沪 
“山西 : 人 办 固 ， 匠 在 地 到 认 负 责 朋 天 山西 省 与 攻关 祷 寻 训 济 公路 联动 人 本 机 


于 纯 青 李 小 晶 会 风 韩 长 二 


“山西 省 10 个 地 四 市 ，3 个 县 加 市 入 列 全 国资 源 型 喊 市 
“首部 山西 民企 社会 责任 
-山西 省 财政 民生 支出 5 年 增长 近 3 从 

“前 三 季度 山西 省 住宅 能 工 而 职 ! 亿 平 旋 米 

“9 月 价 山 本 cr1 同 比 上 癌 3.4% 

“山西 郧 由 中 华 行 上 海 环 二 并 专场 对 控 会 学 行 
我 省 发 布地 质 灾害 气象 风险 直 玲 其 报 

"以 发 电 据 标 鳅 料 其 砂 煤 电 联营 


千 碟 纺 面 世 


更 参 >》 | 服务 指南 


日 山西 以 出 台 守 下 服务 地 方 标准 


上 山西 省 1T 条 中 自爆 估 应 辆 天 攻 太 
日 山西: 转 师 资格 每 5 征 占 主 册 一 次 
昌 山西 芝 务 泊 全 面 实行 行 到 许可 
昌 山西: 企业 的 宫 上 几 欢 毕业 生 


“山西 多 尝 描 小 暮 钦 水 安全 将 逐步 实行 分 后 , 


“山西 省 开 妨 大 规模 突 师 生态 们 所 各 
ms» 


山西 省 委 溯 行 党 的 妊 从 路 续 教 育 9 重要 所 六 区 荣 扶 矿 地 动 基 全 优先 日 山西 天 定 在 初中 毕业 升学 大 斌 中 
省 要 常委 全 召开 合议 认真 查 提 空 日 我 省 前 七 居中 情 会 闪 约 夺目，51 日 八 保 家 十 训 村 尼 站 生 论 领 lo00 元 
昌 我 办 召开 山西 和 时 高 机 构 容 入 开 5 创新 财 次 (ico 亿 元 吕 山 再 省 族 游 局 出 台 《 “美丽 山西 
中 山西 省 政府 就 开展 党 的 群众 路线- 日 “ 本 会" 首 声 集 中 签约 山西 从 昌 今年 我 省 技校 计 车 生 4 2 万 余人 
看 多》 叫 国 间 录 


驻 京 办 内 网 


友情 饼 按 [各省 圣 京 办 借条 - 区 ] 


版 可 


me 


人 Ki 


Seopieeeman 


CNTN 


富国 网 增 电 视 台 
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图 10.1 山西 省 人 民政 府 驻 北 京 办 事 处 首页 
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1 ” 额 导 介绍 。 1 。 机构 设 置 
|。 最 务 指 南 “1 。 在 京 企业 。 1 。 戎 游 观光 


山西 精神 : 信义 坚韧 创新 图 强 


| 京 办 介绍 


山西 害 人 民政 府 驻 北京 办 事 处 设立 于 1958 年 ， 前 身 是 1950 年 设立 
经 委 驻 北京 办 事 处 ，1956 年 撤消 ，1979 年 5 月 经 国务 院 批准 焦 复 , 
2004 年 升格 为 正厅 级 建制 


办 事 处 机 关 位 于 北京 市 西城 区 景山 西 衔 16 号 - 


职能 和 任务 : 承担 派出 地 亮 雪 、 政 府 委托 的 工作 ， 为 本 : 
社会 发 展 服务 。 承 办 中 央 和 国家 机 关 有 关 部 门 交办 事项 ， 配 合 北京 市 
做 好 维护 首都 稳定 的 有 关 工 作 。 切 实 转 变 职 能 ， 详 行政 企 分 开 ， 强 化 
公共 服务 和 社会 管理 ， 积 极 推进 公务 接待 和 后 勤 服务 社会 化 改革 ， 努 
力 为 本 地 区 基层 组 织 、 刘 织 和 群众 在 提供 相关 服务 。 协 助 
流入 地 党 组 织 做 好 本 地 区 在 京 流动 完 员 的 教育 管理 服务 工作 。 


训 情 抽 质 |-- 和 省 对 京 力 树 撞 - 加 


事 处 如 Righis Resered 
P110493: 


可 所 有 山本 者 


则 


10.2 驻 京 办 介绍 页 面 
洛 首页 的 XHTML 页 面 表示 为 index html， 除 首页 外 的 其 他 页 面 统称 为 内 页 。 


10.1.1 头 部 和 页 脚 分 析 


页 面 的 头 部 ， 如 图 10.3 所 示 ， 包 括 网 站 banner、 导 航 和 滚动 文字 ， 分 别 对 应 图 中 的 OOG@。 
网 站 banner 是 一 张 图 片 ， 导 航 是 由 文字 组 成 的 链接 ， 滚 动 文字 是 一 段 文字 。 


首 页 1 京 办 介绍 ”| ”领导 介绍 。 | ”机 构 设置 1 京 办 之 二 1 ”山西 省 情 。， 新闻 中 心 ”| ”招商 引资 
驻 京 办 内 网 ”| ”党 的 建设 ”| ”服务 指南 。 | ”在 京 企 业 ”| 雍 浇 观光 。 |  ” 罗 情 超 闻 ， “在线 留 言 “| ”联系 我 们 


山本 精神: 信义 坚 记 创新 加强 @ | 


10.3 页 面 头 部 


网 
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在 布局 上 ， 网 站 banner、 导 航 和 滚动 文字 从 上 而 下 顺序 排列 ， 没 有 浮动 和 定位 ， 是 正常 
CSS 文 档 流 。 

页 脚 ， 如 图 10.4 所 示 ， 由 图 片 链接 和 版 权 组 成 ， 分 别 对 应 图 中 的 OO@O。 这 2 个 部 分 按照 CSS 
正常 文档 流 自 上 而 下 顺序 排列 ， 其 中 友情 链接 由 8 张 图 片 链 接 组 成 ， 版 权 由 3 段 文字 组 成 。 


图 10.4 页 脚 


10.1.2 首页 主体 内 容 分 析 


首页 的 主体 内 容 ， 如 图 10.5 所 示 ， 包 括 政府 动态 、 新 闻 中 心 、 京 办 之 窗 、 山 西 省 情 、 在 
线 留 言 、 站 长 信箱 、 乡 情趣 闻 、 教 育 实践 活动 、 招 商 引资 、 服 务 指 南 、 山 西 各 市 驻 京 机 构 和 
专题 活动 ， 分 别 对 应 图 中 的 0O@@O@O@06@09000. 


政府 动态 由 标题 、 图 片 和 新 闻 列 表 3 部 分 组 成 。 其 中 ， 标 题 部 分 除了 标题 内 容 外 ， 还 
包括 “更 多 ”链接 。 

新 闻 中 心 、 京 办 之 窗 、 山 西 省 情 、 教 育 实践 活动 、 招 商 引 资 和 服务 指南 这 6 部 分 结构 
类 似 ， 都 是 由 标题 和 新 闻 列表 两 部 分 组 成 。 其 中 ， 标 题 部 分 除了 标题 内 容 外 ， 还 包 
括 “ 更 多 ”链接 。 

在 线 留言 和 站 长 信箱 分 别 是 两 张 图 片 链 接 。 

乡情 趣闻 由 标题 和 图 片 列表 组 成 。 其 中 ， 标 题 部 分 除了 标题 内 容 外 ， 还 包括 “更 
多 ”链接 。 图 片 列表 由 4 组 图 片 和 文字 链接 组 成 。 

山西 各 市 驻 京 机 构 由 标题 、 图 片 列 表 、 驻 京 办 内 网 和 友情 链接 组 成 。 其 中 ， 标 题 部 
分 除了 标题 内 容 外 ， 还 包括 “更 多 ”链接 。 图 片 列 表 由 6 个 图 片 链接 组 成 。 驻 京 办 内 
网 是 一 张 图 片 。 友 情 链接 是 一 个 select 选 择 列 表 。 

专题 活动 由 标题 、“ 更 多 ”链接 和 图 片 滚动 列表 组 成 。 


首页 主体 内 容 在 整体 结构 上 分 为 左右 两 栏 ， 其 中 ， 政 府 动态 、 京 办 之 窗 、 山 西 省 情 、 教 
育 实践 活动 、 招 商 引 资 、 服 务 指南 和 专题 活动 都 属于 左 栏 ， 它 们 都 包含 在 一 个 向 左 浮动 的 div 
容器 中 。 新 闻 中 心 、 在 线 留言 、 站 长 信箱 、 乡 情趣 闻 和 山西 各 市 驻 京 机 构 都 属于 右 栏 ， 它 们 
都 包含 在 一 个 向 右 浮动 的 div 容 器 中 。 
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“FF HER 
BE 放生 本 四 
a 机 大 人 


由: 旦 二 中 天 汪 本 村 
有 季 可 看 芝 全 忆 Eiy 届 | 主 序 上 民工 
:个 攻 ,所 在 记名 天 角 去 


京 天 包机 记 从 济 本 请 将 开机 
山本 上 有 二 记 世 宁 示 为 民品 防 芭 民 请 让 
者 力 能 外 信 化 N 天 和 多 
山下 六 机 要 起 寻 训 # 局 关 位 
-第 本 本 二 计谋 右 上 学生 

-山西 汪 51 个 帘 吕 中 诈 * 百 上 人 


+ 一 丙 委 月 各: 站] 本 和 
和 


| 瘦 育 实 茵 动 | 条 商 引资 
省 日 开 和 生 四 9 RG 2198S 攻 
i 日 册 丙 革 大 人事 此 匠人， 十 人 和 与 


日 山 可 于 和 沈 附会 转 痛 
人 让 
旧 第 如 开山 本 省 入 信守 和 开 
日 山 丙 再 名 开拓 科 丰 生 芭 


| 


图 10.5 首页 的 主体 内 容 


10.1.3 内 页 主体 内 容 分 析 


内 页 的 主体 内 容 ， 如 图 10.6 所 示 ， 包 括 京 办 介绍 、 乡 情趣 闻 和 山西 各 市 驻 京 机 构 ， 分 别 
对 应 图 中 的 OOG@。 

。 京 办 介绍 由 标题 和 内 容 组 成 。 其中， 内 容 部 分 是 3 段 文 字 。 

日 乡情 趣闻 和 山西 各 市 驻 京 机 构 与 首页 完全 相同 。 

内 页 主体 内 容 在 整体 结构 上 分 为 左右 两 栏 ， 其 中 京 办 介绍 属于 左 栏 ， 向 左 浮动 。 乡 情趣 
闻 和 山西 各 市 驻 京 机 构 都 属于 右 栏 ， 它 们 都 包含 在 一 个 向 右 浮动 的 div 容 器 中 。 
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1 Af 招 


山西 省 人 民政 府 圣 北京 办 事 处 设立 于 1958 年 ， 前 身 是 1950 年 设立 
的 省 关 委 福 北京 办 事 处 ，1966 年 阁 漠 ，1979 年 5 月 径 国 务 院 社 准 恢 复 ， 
2004 年 升格 为 正厅 级 建 闽 - 


办 事 处 机 关 位 于 北京 9 山西 寺 16 号 。 


职能 和 蔚 务 : 承担 派出 地 竞 委 、 改 府 : 
社会 货 展 避 务 ， 承 办 中 央 和 国 容 | 
全 好 维护 首都 稳定 的 有 关 工 作 


工 作 ， 汶 本 地 区 总 济 


力 为 本 地 区 蕉 层 组 积 、 社 会 组 织 和 群众 在 京 读 动手 供 眶 关 原 务 。 协 动 
流入 地 党 组 织 做 好 本 地 区 在 京 流动 各 吕 的 教育 管理 服务 工作 


图 10.6 内 页 的 主体 内 容 


10.2 布局 规划 及 切 图 


本 节 将 主要 介绍 山西 省 人 民政 府 驻 北京 办 事 处 网 站 的 页 面 布局 规划 、 页 面 图 片 切割 并 导 
图 片 。 这 些 工作 是 制作 本 章 案例 前 的 必要 步骤 。 


10.2.1 页 面 布局 规划 


根据 前 面 对 网 站 效果 图 的 分 析 ， 为 了 后 面 写 出 清晰 简洁 的 XHTML 代码 ， 对 页 面 的 整体 
结构 进行 了 提炼 ， 得 到 了 页 面 的 大 致 布局 图 ， 如 图 10.7 所 示 是 首页 和 内 页 的 页 面 布局 图 。 


Ee 


图 10.7 页 面 布局 


10.2.2 切割 首页 及 导出 图 片 
电子 政务 网 站 在 制作 页 面 时 需要 切割 的 图 片 包括 永久 图 片 和 临时 图 片 两 种 。 
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@ 永久 图 片 包括 网 站 Banner 图 片 banner.gif、 网 站 头 部 背景 图 navBg.png、 站 长 信箱 
email.gif、 在 线 留 言 online.gif、 驻 京 办 内 网 net.gif、 各 模块 标题 部 分 合并 后 的 背景 
图 片 bg x_imgs.png、 教 育 实践 活动 /招商 引资 及 服务 指南 这 3 部 分 用 到 的 背景 图 片 
gatherNewsBg.gif、 小 图 片 ico_cross.gif 和 ico_dot.gif。 

e 临时 图 片 包 括 政府 动态 左 栏 图 片 p.jpg， 乡 情趣 闻 中 的 4 张 图 片 : tour01.jpg、tour02. 
jpg、tour03.jpg 和 tour04.jpg， 山 西 各 市 驻 京 机构 中 的 6 张 图 片 : city01.gif、city02.gif、 
city03.gif、city04.gif、city05.gif 和 city06.gif， 专 题 活动 中 的 2 张 图 片 : activity01.png 和 
activity02.png， 页 脚 中 图 片 列表 中 的 8 张 图 片 : logo01.png、logo02.png、logo03.png、 
logo04.png、logo05.png、logo06.png、logo07.png 和 logo08.png。 


如 图 10.8 所 示 是 首页 在 Photoshop 中 的 所 有 切片 。 


heir 
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A 
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10.8 首页 在 Photoshop 中 的 所 有 切片 


入 
3 刘 图 中 没有 标注 名 称 的 切片 是 已 经 被 合并 的 图 片 。 
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10.2.3 切割 内 页 及 导出 图 片 


内 页 各 模块 中 用 到 的 图 片 与 首页 相同 ， 因 此 不 需要 重复 切割 了 。 


10.3 XHTML 编写 


本 节 将 详细 讲解 页 面 头 部 和 页 脚 、 页 面 公 共 部 分 、 页 面 框架 和 每 个 页 面 的 XHTML 代码 
的 编写 。 语 义 和 结 构 良 好 的 XHTML 代码 不 仅 在 制作 网 站 时 省 时 省 力 ， 更 有 利于 提高 网 站 排 
名 ， 因 此 XHTML 的 编写 虽然 简单 但 很 重要 。 


10.3.1 页 面 的 XHTML 框架 搭建 


首页 和 内 页 的 XHTML 框架 相同 ， 包 括 3 部 分 ， 头 部 、 主 体内 容 和 页 脚 ，id 分 别 为 ht4、bd 
和 ft。 XHTML 框架 的 代码 编写 如 下 。 


代码 10-1 

01 <l==Start of had=> 

02 <div id="hd" class="cf"></div> 
03 -l==end of hd=> 

04 <l=--gtart of bd==> 

05 <div id="bd" ></div> 

06 <L-“end of bd-—> 

07 ==—stAart oF 这 二 二 二 六 

08 <div id="ft"></div> 

09 Sl-~end oF Et 


第 02 行 是 页 面 头 部 。 第 05 行 是 页 面 主 体内 容 。 第 08 行 是 页 脚 。 其 他 行 代 码 是 注释 。 


10.3.2 页 面 头 部 和 页 脚 的 XHTML 编写 


根据 前 面 对 页 面 头 部 的 分 析 ， 导 航 部 分 的 文字 链接 由 两 个 p 标 签 分 别 包 含 若干 a 标 签 组 成 ， 
其 中 文字 链接 旁边 的 竖 线 用 “|” 分 隔 。 滚 动 文字 由 marquee 标 签 包含 文字 构成 ，marquee 上 面 的 
属性 scrollamount 表 示 运 动 速度 ， 值 是 正 整 数 ， 默 认为 6， 值 越 大 marquee 中 的 文字 运动 越 快 。 


编写 头 部 的 XHTML 代 码 如 下 。 

代码 10-2 

01 <xdiv id="hd" class="cf"> 

02 <img src="images/banner.gif"/> 
03 <div class="nav"> 

04 


<p><a href="index.html" target=" blank" class="wordGap"> 
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[s 


首 页 </a>1<a href="introduce-html" target="” blank"> 京 办 介绍 </a>| 
<a href="#"” target="” blank"> 领 导 介绍 </a>|<a href="#" 
target=" blank"> 机 构 设置 </a>1<a href="#" target=" blank"> 
京 办 之 窗 </a>1<a href="#"” target=" blank"> 山 西 省 情 </a>| 
<a href="#"” target="” blank"> 新 闻 中 心 </a>|<a href="#" 
target="” blank"> 招 商 引资 </a></p> 
05 <p><a href="#" target=" blank"> 驻 京 办 内 网 </a>|<a href="#" 
target=" blank"> 党 的 建设 </a>|<a href="#" target=" blank"> 
服务 指南 </a>1<a href="#"” target="” blank"> 在 京 企业 </a>| 
<a href="#" target="” blank"> 旅 游 观光 </a>|<a href="#" 
target=" blank"> 乡 情趣 闻 </a>|<a href="#" target=" blank"> 
在 线 留言 </a>1<a href="#"” target="”blank"> 联 系 我 们 </a></p> 
06 </div> 
07 <marquee scrollamount="1"> 山 西 精神 : 信义 坚韧 创新 图 强 </marquee> 
08 </div> 


第 01 行 和 第 08 行 是 头 部 的 最 外 层 容 器 标签 ， 第 02 行 是 网 站 banner， 第 03~06 行 是 导航 ， 其 


h 第 04 行 和 第 05 行 分 别 是 两 个 p 标 签 所 包含 的 若干 8 标签。 第 07 行 是 由 marquee 标 签 包含 的 滚动 


奖 字 。 


根据 前 面 对 页 脚 的 分 析 ， 编 写 页 脚 的 XHTML 代 码 如 下 。 

代码 10-3 

01 <div id="ft"> 

02 <div class="img"><a href="#" target=" blank"> 


<img src="temp/logo01.png" width="116" height="51" /> 
</a>…<a href="#" target=" blank"><img src="temp/1ogo08.png" 
width="113" height="53" /></a></div> 


03 <div class="copyRight arial"> 
04 <p>Copyright@2011 山 西 省 人 民政 府 驻 北 京 办 事 处 
All Rights Reserved</p> 
05 <p> 版 权 所 有 山西 省 人 民政 府 驻 北京 办 事 处 ”备案 号 : 京 ICP 备 11049327</p> 
06 <p><a href="#" target=" blank"> 技 术 支 持 中 国 万 网 


<img src="temp/wanLogo.gif" width="17" height="17"” /></a></p> 
07 </div> 
08 </div> 


第 01 行 和 第 08 行 是 页 脚 的 最 外 层 容器 标签 ， 第 02 行 是 图 片 列表 ， 第 03~07 行 是 版 权 。 
内 页 的 版 权 部 分 除了 没有 图 片 列表 外 ， 其 他 部 分 与 首页 完全 相同 。 


10.3.3 页 面 公共 部 分 的 XHTML 编写 


在 本 章 案 例 中 ， 页 面 的 公共 部 分 包括 页 面 头 部 、 页 脚 和 右 侧 ， 如 图 10.9 所 示 。 页 面 头 部 


和 页 脚 的 XHTML 代码 在 前 面 已 经 讲 过 了 ， 这 里 不 再 发 述 。 


仔细 观察 首页 和 内 页 的 页 脚 可 以 发 现 ， 首 页 的 页 脚 比 商品 页 多 了 一 个 版 块 : 更 多 图 片 。 页 脚 由 

> ”2 个 版 块 组 成 ， 每 个 版 块 单独 删除 不 会 影响 其 他 版 块 的 布局 和 样式 ， 一 个 网 站 由 许多 子 页 面 组 
成 ， 每 个 子 页 面 可 以 根据 需要 随意 删除 其 中 任意 1 个 版 块 ， 因 此 ， 这 里 把 页 脚 的 ?个 版 块 都 作为 
页 面 的 公共 部 分 。 
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人 DIV+CSSrmskxzmaaad .> 


FRNA 
“ERE 
NL 
RH 

FI ER 
ie 
i En, RR 
RFE 


和 和 


TT ARES 
隐伏 HR 

i LT 

RR fun 

TR aL 山西 首 人民 政府 驻 北京 办 事 处 设立 于 1955 年 ， 前 身 是 1950 年 设立 
+ RR 的 有 如 要 福 北 京 办 事 处 ，1966 年 强 漠 ，1979 年 5 月 关 国 务 院 批 准 恢 复 ， 
ET on 2004 年 升格 为 正厅 各 是 抽 。 

pn ee | Ue hls 办 事 站 机 关 位 于 北京 市 本 横 区 景山 本 村 16 号 。 
A 

Meth NE 职 吉 和 任务 ， 承 担 江 出 地 过 委 、 政 府 村 托 的 工作 ， 为 丰 地 区 翅 济 
mht, OT PE :Me 社会 发 展 最 务 。 孙 办 中 央 和 国家 机 关 有 基部 门 交办 事项 ， 配 合 北京 市 
0 做 好 族 护 首都 稳定 的 有 关 工 作 ， 切 详 转 变 职 能 ， 详 行政 企 分 开 ， 强 化 
上 公共 最 务 和 社会 管理 ， 祝 板 扒 进 公 务 按 待 和 后 吉 服 务 社会 化 改 于 ， 努 
ttt 力 为 本 好 区 基 屋 把 扣 、 社 会 租 织 和 群众 在京 活动 提供 相关 服务 ， 钾 肋 
要 人 而 六 。。 上 RR 流入 地 锡 蛆 织 做 好 本 地 区 在 京 流动 竟 员 的 教育 管理 了 务工 作 
A ae 


CD 日“ 再 人 后 二 至 


[| 


NE 


10.9 网 站 所 有 页 面 的 公共 部 分 
体内 容 的 分 析 ， 页 面 右 侧 也 提炼 出 网 站 的 公共 部 分 。 页 面 右 侧 


根据 前 面 对 首 页 和 内 页 3 
的 XHTML 代 码 编 写 如 下 。 


代码 10-4 


01 <xdiv class="fr w267"> 


加 


02 <div class="news border mb10"> 
03 <div class="head-2"><a class="more" href="#" target=" blank"> 
更 多 ggt; ggt;</a><h2 class="w72"> 新 闻 中 心 </h2></div> 
04 <ul class="txtList dotIco"> 
05 <li><a href="#"” target=" blank"> 李 小 鹏 . . .</a></1i> 
06 
07 </ul> 
08 </div> 
09 <div class="sideBanner mb8"><a href="#" target=" blank"> 
<img src="images/online.gif" /></a></div> 
10 <div class="sideBanner mb8"><a href="#" target=" blank"> 
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<img src="images/email.gif" /></a></div> 


11 <div class="interest border mb10"> 
12 <div class="head-2"><a class="more" href="#" 
target="” blank"> 更 多 ggt; ggt;</a><h2 class="w72"> 乡 情趣 闻 </h2></div> 
13 <ul class="picList cf"> 
14 <li class="fl"><a href="#" target=" blank"> 


<img src="temp/tour01.jpg" /></a><h3> 
<a href="#" target=" blank"> 山 西 旅游 </a></h3></1i> 


Ls 

16 </ul> 

Eh </div> 

18 <div class="organization border"> 

19 <div class="head-2"><a class="more" href="#" target="_ 
blank"> 更 多 ggt; ggt;</a><h2 class="w113"> 山 西 各 市 驻 京 机 构 </h2></div> 

20 <div class="city"> 

2 <a href="#" target=" blank"><img src="temp/city01.gif"/></a> 

“<a href="#" target=" blank"><img src= 
"temp/city06.gif" /></a> 

4 </div> 

2 <div class="sideBanner mb8"> 
<a href="#" target=" blank"><img src="images/net.gif" /> 
</a></div> 

24 <div class="friendLink"> 

25 <labe1> 友 情 链接 </1label> 

26 <select> 

27 <option value="0">-- 各 省 驻 京 办 链接 --</option> 

28 v0 

29 </select> 

30 </div> 

31 </div> 

32 </div> 


第 01 行 和 第 32 行 是 右 侧 最 外 层 容 器 .万 。 第 02~08 行 是 新 闻 中 心 。 第 09 行 和 第 10 行 分 别 是 在 
线 留言 和 站 长 信箱 。 第 11~17 行 是 乡情 趣闻 。 第 18~31 行 是 山西 各 市 驻 京 机 构 。 


本 章 所 讲 的 内 页 共用 了 右 侧 的 乡情 趣闻 和 山西 各 市 驻 京 机 构 ， 网 站 上 其 他 内 页 分 别 共用 了 右 侧 
芝 不 同 的 模块 组 合 ， 因 此 右 侧 也 归 类 为 网 站 的 公共 部 分 。 


> 


10.3.4 首页 主体 内 容 的 XHTML 编 写 


首页 主体 内 容 除了 右 侧 公 共 部 分 内 容 外 ， 还 包括 政府 动态 、 京 办 之 窗 、 山 西 省 情 、 教 育 
实践 活动 、 招 商 引 资 、 服 务 指南 以 及 专题 活动 ， 这 几 个 模块 在 XHTML 结 构 上 可 以 提取 出 与 
右 侧 的 新 闻 中 心 相同 的 部 分 ， 分 别 包括 : 标题 和 ul 文字 链接 列表 。 标 题 部 分 都 是 由 h2 标 签 包 
含 的 标题 内 容 和 a 标签 包含 的 “更 多 ”组 成 ，ul 文 字 链 接 列表 都 是 由 若干 个 i 标签 包含 文字 链 
接 组 成 。 在 线 留 言 和 站 长 信箱 结构 相同 ， 都 是 一 个 a 标签 包含 的 mg 图 片 。 

首页 主体 内 容 的 XHTML 代码 编写 如 下 。 


代码 10-5 


01 <div id="bd" class="cf"> 
02 <div class="fl w712"> 
03 <div class="trends border mb10"> 
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04 <div class="head-1"> 
<a class="more" href="#" target=" blank"> 
更 多 ggt; ggt;</a><h2> 政 府 动 态 </h2></div> 


05 <img src="temp/p.jpg" width="354" height="236" /> 
06 <ul class="txtList dotIco"> 

07 <li><a href=! target="” blank"> 李 小 鹏 … 调 研 </a></1i> 
08 “ 

09 </ul> 

10 </div> 

LL <div class="window border fl w348 mb10"> 

12 <div class="head-2"><a class="more" 


href="#" target=" blank"> 更 多 ggt;&gt;</a> 
<h2 class="w72"> 京 办 之 窗 </h2></div> 


U3 <ul class="txtList dotGap dotIco"> 

14 <li><a href="#" target="” blank"> 京 津 蔓 … 收 费 
</a></1i> 

Ts ose 

16 </ul> 

Lp </div> 

18 <div class="status border fr w348 mb10"> 

19 <div class="head-2"><a class="more" href="#" 

target=" blank"> 更 多 ggt; &gt;</a><h2 class="w72"> 
山西 省 情 </h2></div> 

20 <ul class="txtList dotGap dotIco"> 

2 <li><a href="#" target=" blank"> 山 西 省 … 城 市 
</a></1i> 

22 oo 

23 </ul> 

24 </div> 

这 <div class="gatherNews border cl cf mb10"> 

26 <div class="newsSection borderRig w235 fl"> 

2 <div class="head-3"><a class="more" href="#" 
target=" plank"> 更 多 ggt; &gt;</a><h2> 
教育 实践 活动 </h2></div> 

28 <ul class="txtList crossIco"> 

29 <li><a href="#" target=" blank"> 

省 委 常 . . .</a></1i> 

30 00 

31 </ul> 

2 </div> 

33 <div class="newsSection borderRig borderLeft w235 fl"> 

34 <div class="head-3"><a class="more" href="#" 


target=" blank"> 更 多 ggt; &gt; </a> 
<h2> 招 商 引 资 </h2></div> 


EE <ul class="txtList crossIco"> 

36 <li><a href="#" target=" blank"> 
第 三 届 ...</a></1i> 

37 0 

38 </ul> 

3 </div> 

40 <div class="newsSection borderLeft w235 fl"> 
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41 <div class="head-3"><a class="more" href="#" 
target=" blank"> 更 多 ggt; &gt; </a> 
<h2> 服 务 指南 </h2></div> 
42 <ul class="txtList crossIco"> 
43 <li><a href="#" target=" blank"> 
山西 拟 …</a></1i> 
44 se 
45 </ul> 
46 </div> 
47 </div> 
48 <div class="special"> 
49 <h2> 专 <br/> 题 <br/> 活 <br/> 动 </h2> 
50 <div class="more"><a href="#" target=" blank"> 
更 多 ggt; ggt;</a></div> 
51 <div class="scroll"> 
52 <ul class="picList cf"> 
53 <1i class="fl"><a href="#" 
target=" blank"><img src="temp/ 
activity01.png" /></a><h3><a href="#" 
target="” blank"> 文 物 景观 </a></h3></1i> 
54 ay 
</ul> 
56 </div> 
i </div> 
58 </div> 
59 <div class="fr Ww267"> 
60 2 
61 </div> 
62 </div> 


第 01 行 和 第 62 行 是 首页 主体 内 容 的 最 外 层 容 器 #bd。 第 02 行 和 第 58 行 是 左 侧 最 外 层 容 
器 。 第 59~61 行 是 右 侧 内 容 。 第 03~10 行 是 政府 动态 。 第 11~17 行 是 京 办 之 窗 。 第 18~24 行 是 山 
西 省 情 。 第 25~47 行 是 教育 实践 活动 、 招 商 引资 和 服务 指南 这 3 个 模块 的 内 容 总 和 ， 其 中 ， 第 
25 行 和 第 47 行 是 这 3 个 模块 的 最 外 层 容器 ， 第 26~32 行 是 教育 实践 活动 ， 第 33~39 行 是 招商 引 


资 ， 第 40~46 行 是 服务 指南 。 


第 48~57 行 是 专题 活动 ， 其 中 第 51 行 和 第 56 行 是 图 片 列表 的 最 外 层 容 器 .scroll， 这 里 在 
ul 列表 最 外 层 增加 一 层 div 容 器 的 目的 是 为 了 在 后 面 的 CSS 中 限制 这 层 容器 的 宽度 ， 因 为 u 图 
片 是 从 右 向 左 连续 滚动 的 图 片 ， 不 能 折 行 显示 ， 因 此 ul 的 宽度 需要 设置 得 很 大 ， 具 体 根 据 


器 .special 的 宽度 ， 从 而 造成 页 面 变 形 。 


10.3.5 内 页 主体 内 容 的 XHTML 编写 


图 片 数量 确定 ， 如 果 没有 利用 .scroll 容 器 限制 宽度 ，ul 列 表 的 宽度 将 超出 专题 活动 最 外 层 容 


根据 前 面 对 内 页 主体 内 容 的 分 析 ， 编 写 内 页 主体 内 容 的 XHTML 代码 如 下 。 


代码 10-6 


01 <xdiv id="bd" class="cf"> 
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02 <div class="fl w712"> 
03 <div class="introduce border"> 
04 <div class="head-1"><h2> 京 办 介绍 </h2></div> 


<p> 山 西 省 人 民政 府 驻 北 京 办 事 处 设立 于 1958 年 …… 正 厅 级 建制 。</P> 
<p> 办 事 处 机 关 位 于 北京 市 西城 区 景山 西 街 16 号 。</P> 
<p> 职 能 和 任务 :承担 派出 地 党 委 …… 服 务工 作 。</p> 


08 </div> 


09 </div> 


10 <div class="fr w267"> 


11 <div class="interest border mb10"> 


13 </div> 


16 </div> 


17 </div> 
18 </div> 


14 <div class="organization border"> 


第 01 行 和 第 18 行 是 内 页 主体 内 容 的 最 外 层 容 器 #5bd。 第 02 行 和 第 09 行 是 左 侧 最 外 层 容 器 。 
第 10 行 和 第 17 行 是 右 侧 最 外 层 容 器 。 第 03~08 行 是 京 办 介绍 。 第 11~13 行 是 乡情 趣闻 。 第 14~16 
行 是 山西 各 市 驻 京 机 构 。 需 要 特别 说 明 的 是 ， 内 页 左 侧 的 京 办 介绍 模块 是 放 在 第 02 行 和 第 09 行 


的 左 侧 最 外 层 容器 中 来 实现 京 办 介绍 向 左 浮动 的 。 因 为 内 页 除了 本 章 讲解 的 京 办 介绍 页 外 ， 还 


有 许多 ， 为 了 结构 清晰 和 重用 


样式 代码 ， 统 一 将 左 侧 模块 都 放 在 左 侧 容器 中 。 


10.3.6 首页 XHTML 代 码 总 览 


前 面 对 网 站 首页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 10.10 所 示 是 由 这 些 模块 
组 成 的 首页 XHTML 框 架 图 ， 说 明了 层 的 嵌 套 关系 。 


图 10.10 首页 XHTML 框架 


在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 首页 的 
完整 XHTML 代码 。 完 整 的 首页 XHTML 代码 如 下 。 


代码 10-7 


01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 


04 <meta charset="utf-8"> 
05 <title> 首 页 </title> 
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06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <1==5tart of hdq==> 

11 <xdiv id="hd"> 


13 </div> 

La < end or hd > 

5 < Stare oF bd=— > 

16 <div id="bd" class="cf"> 


ER <div class="fl w712"> 
18 2 

Ia </div> 

20 <div class="fr w267"> 
21 se 

22 </div> 

23 </div> 


24 < ="end of DG 一 > 
25 <l==ptart DF Et==> 
26 <dqiv id="ft"> 


28 </div> 

29 <l—=end of Ft==> 

30 </div> 

31 </body> 

32 </html> 

第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 32 行 是 页 面 
的 一 对 html 标 签 ， 对 应 图 中 的 html{}。 第 08 行 和 第 31 行 是 页 面 的 一 对 body 标 签 ， 对 应 图 中 的 
body{}。 第 09 行 和 第 30 行 是 页 面 最 外 层 容 器 ， 对 应 图 中 #doc{}。 第 11~13 行 是 页 面 头 部 ， 对 应 
图 中 的 机 df{}。 第 16~23 行 是 页 面 主体 内 容 ， 对 应 图 中 的 #bd{} 。 第 26~28 行 是 页 脚 ， 对 应 图 中 
的 #ft{}。 第 17~19 行 是 左 侧 最 外 层 容器 ， 对 应 图 中 的 .HL， 第 20~22 行 是 右 侧 最 外 层 容 器 ， 对 应 
图 中 的 .位 。 


10.3.7 内 页 XHTML 代码 总 览 


前 面 对 内 页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 10.11 所 示 是 这 些 模块 组 成 的 
内 页 XHTML 框架 图 ， 说 明了 层 的 庶 套 关系 。 


图 10.11 内 页 的 XHTML 框架 
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在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 内 页 的 
完整 XHTML 代 码 。 完 整 的 内 页 XHTML 代 码 如 下 。 


代码 10-8 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
05 <title> 驻 京 办 介绍 </title> 
06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 < -start of hd==> 

11 <div id="hd"> 

12 vee 

13 </div> 

U0d of ha- 

15 <!--start of bd--> 

16 <div id="bd" class="cf"> 

a <div class="f] w712"> 
18 0 

19 </div> 

20 <div class="fr w267"> 
21 ee 

2 </div> 

23 </div> 

24 <!--end of bd--> 

20 l==start oF t= 

26 <div id="ft"> 

27 ne 

28 </div> 

pi 大 攻 一 人 

30 </div> 

31 </body> 

32 </html> 


第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 32 行 是 页 面 的 
一 对 html 标 签 ， 对 应 图 中 的 html{f) 。 第 08 行 和 第 31 行 是 页 面 的 一 对 body 标 签 ， 对 应 图 中 的 bodyf) 。 
第 09 行 和 第 30 行 是 页 面 最 外 层 容 器 ， 对 应 图 中 的 #doc{}。 第 11~13 行 是 页 面 头 部 ， 对 应 图 中 的 
机 d{}。 第 16~23 行 是 页 面 主体 内 容 ， 对 应 图 中 的 #bd{}。 第 26~28 行 是 页 脚 ， 对 应 图 中 的 村 {}。 第 
17~19 行 是 左 侧 最 外 层 容 器 ， 对 应 图 中 的 有 ， 第 20-~22 行 是 右 侧 最 外 层 容 器 ， 对 应 图 中 的 二。 


10.4 CSS 编 写 


本 节 将 主要 讲解 电子 政务 网 站 的 CSS 编 写 ， 包 括 页 面 头 部 和 页 脚 、 首 页 和 内 页 的 CSS 编 写 。 
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10.4.1 页 面 公共 部 分 的 CSS 编 写 


页 面 公共 部 分 包括 CSS 重 置 、 页 面 中 的 公用 字体 、 字 体 颜色 的 样式 ， 以 及 页 面 头 部 和 页 脚 。 

页 面 头 部 和 页 脚 的 CSS 编 写 将 在 第 10.4.3 小 节 中 编写 。CSS 重 置 代 码 、 页 面 公 用 样式 的 
CSS 代 码 编写 如 下 。 

代码 10-9 


01 /*css reset*/ 

02 body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6é,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote,th,td{margin:0; padding:0;} 
/* 以 上 元 素 的 内 外 边 距 都 设置 为 0*/ 

03 

04 *.cffzoom:17} /* IE 6/7 浏 览 器 (触发 hasLayout) */ 

05 /*global css*/ 

06 body{font-family:" 宋 体 ";font-size:12px;color:#333; 
line-height:20px;background:#fff;} 

07 af{color:#333;} 

08 .arial{font-family:Arial;} 

09 h2,h3{font-size:12px;} 

10 .border{border:lpx solid #ccc;} 

11 .borderRig{border-right:lpx solid #DFDFDF;} 

12 .borderLeft{border-left:lpx solid #fff;} 

13 .w72{width:72px;} 

14 .wll3{width:113px;} 

15 .w235{width:235px;} 

16 .w348{width:348px;} 

17 .w7l2{width:712px;} 

18 .w267{width:267px;} 

19 .mb8{margin-bottom:8px;} 

20 .mbl0{margin-bottom:10px;} 

21 .fl{tfloat:left;display:inline;} 

22 .fr{float:right;display:inline;} 

23 .cl{clear:both;} 

24 .dotGap li{border-bottom:lpx dotted #CCC;} 

25 .dotIco li{background:url("../images/ico dot.gif") 
no-repeat left center;padding:0 0 0 Spx;} 

26 .crossIco li{background:url("../images/ico cross.gif") 
no-repeat left center;padding:0 0 0 l5px;} 

27 /*lists of texts*/ 

28 .txtList{margin-left:l0px;margin-right:10px;} 

29 .txtList .noBorder{border-bottom:0 none;} 

30, /*1ists of pictures*/ 

31 .picList li{text-align:center;} 

32 .picList img{display:block;overflow:hidden;} 

33 /*all head*/ 

34 .head-l{background:url("../images/bg x imgs.png") 
repeat-x 0 0;height:33px;line-height:33px;overflow:hidden;color:#940607;} 

35 .head-1 .more{float:right;color:#940607;padding:0 lO0px 0 0;} 

36 .head-1 h2{border-left:2px solid #c80000;padding:0 0 0 12px; 
height:l6px;line-height:1l6px;margin:9px 0 0 1l0px;} 

37 .head-2{background:url("../images/bg x imgs.png") 
repeat-x 0 -33px;height:42px;line-height:33px;overflow:hidden;color:#fff;} 
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38 
= 


40 
41 
42 
43 


44 
45 
46 
47 
48 
49 
50 
51 
52 


-head-2 .more{float:right;color:#E12E25;padding:0 10px 0 0;} 

-head-2 h2{background:url("../images/h bg imgs.png") 

no-repeat 0 0;height:40px;margin:2px 0 0 1l5px;text-align:center;} 
-head-2 .wll3{background-position:0 -59px;} 
.head-3{height:33px;line-height:33px;overflow:hidden;color:#E12E25;} 
-head-3 .more{float:right;color:#El12E25;padding:0 1l0px 0 0;} 

.head-3 h2{border-left:2px solid #C800007 

padding:0 0 0 1l2px;height:16px;line-height:1l6px;margin:9px 0 0 1l0px;} 
/*common of right*/ 

-sideBanner img{display:block;overflow:hidden;margin:0 auto;} 
.interest h3 a{color:#El12E25;font-weight:normal;} 

.interest .picList{padding:0 0 0 Spx;} 

.interest .picList li{margin:0 4px;} 

-organization .city{height:184px;} 

.organization .city img{margin:1l0px 0 0 20px;width:100px;} 
-Organization .friendLink{text-align:center;height:30px;} 
.organization .friendLink select{color:#666;} 


第 01~04 行 是 CSS 重 置 代码 ， 与 上 一 章 相同 。 第 05~52 行 是 公用 CSS 代 码 。 其 中 第 06~26 行 


是 网 站 公用 字体 、 宽 度 定义 、 图 标 等 的 样式 ， 第 28~29 行 是 所 有 ul 文字 链接 列表 提炼 的 公用 样 
式 ， 第 31~32 行 是 所 有 ul 图 片 链接 列表 提炼 的 公用 样式 ， 第 34~43 行 是 所 有 模块 标题 的 公用 样 
式 ， 第 45~52 行 是 右 侧 模块 样式 。 

10.4.2 页 面 框架 的 CSS 编 写 


前 面 分 析 了 页 面 的 布局 图 并 且 编 写 了 页 面 框架 的 XHTML 代码 ， 根 据 这 两 部 分 编写 页 面 


框架 的 CSS 代 码 如 下 。 
代码 10-10 
01 #doc{width:1004px;margin:0 auto;line-height:30px;} 
02 #hd{background:url("../images/navBg.png") 
no-repeat left bottom;height:287px;font-weight:bold;} 
03 #bd{width:987px;margin:0 auto;} 
04 #ft{color:#767676;border-top:3px solid #C110127margin:10px 0 0;} 


第 01 行 是 页 面 最 外 层 容 器 的 样式 ， 定 义 了 页 面 内 容 的 宽度 、 在 屏幕 中 水 平 居 中 显示 以 及 
页 面 元 素 行 高 。 第 02 行 是 页 面 头 部 的 最 外 层 容 器 样式 ， 定 义 了 头 部 的 背景 图 、 头 部 高 度 以 及 
头 部 字体 加 粗 显 示 。 第 03 行 是 首页 的 主体 内 容 最 外 层 容器 的 样式 ， 定 义 了 主体 内 容 的 宽度 ， 
并 使 主体 内 容 相对 于 父 容器 水 平 居中 显示 。 第 04 行 是 页 脚 最 外 层 容器 的 样式 ， 分 别 定义 了 文 


字 颜 色 、 


容器 上 边框 以 及 上 下 左右 外 边 距 。 


10.4.3 页 面 头 部 和 页 脚 的 CSS 编 写 


前 面 分 析 了 页 面 头 部 并 且 编写 了 页 面 头 部 的 XHTML 代码 ， 页 面 头 部 的 CSS 代 码 如 下 。 
代码 10-11 


01 


#hd{background:url("../images/navBg.png") 
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02 
03 
04 
05 
06 
07 
08 


no-repeat left bottom;height:287px;font-weight:bold;} 

#hd img{display:block;overflow:hidden} 

#hd a{color:#fff;} 

#hd a:hover{color:#FFF707;} 

#hd .nav{height:59px;color:#fff;line-height:28px;margin:0 0 Spx;} 
#hd .nav a{fmargin:0 28px;font-size:14px;} 

#hd .nav .wordGap{word-spacing:37px;} 

#hd marquee{color:#940607;font-size:20px;} 


第 01 行 是 页 面 头 部 最 外 层 容 器 的 样式 ， 前 面 已 经 讲 过 了 ， 这 里 不 再 费 述 。 第 02 行 是 网 站 
头 部 banner 的 样式 ， 通 过 display:block 和 overflow:hidden 将 图 片 从 行内 元 素 转 变 成 块 元 素 ， 并 
去 掉 了 图 片 下 面 的 空白 间距 。 第 07 行 通过 word-spacing:37px 修 改 导 航 “首页 ”的 字 间 距离 ， 
使 之 与 导航 中 的 其 他 文字 链接 对 齐 。 第 08 行 是 滚动 文字 的 样式 ， 设 置 了 文字 的 颜色 和 大 小 。 

前 面 分析 了 页 脚 并 且 编 写 了 页 脚 的 XHTML 代码 ， 页 脚 的 CSS 代 码 如 下 。 


代码 10-12 


01 
02 
03 
04 
05 
06 


#ft{color:#767676;border-top:3px solid #C110127margin:10pPx 0 0;} 
#ft a{color:#767676;} 

#ft img{vertical-align:middle;} 

#ft .img{border-bottom:lpx solid #ccc;padding:10px 0;} 

#ft .img a{fmargin:0 Spx;} 

#ft .copyRight{text-align:center;line-height:22px;padding:10px 0;} 


第 01 行 是 页 脚 的 最 外 层 容 器 的 样式 ， 第 03 行 通过 设置 vertical-align:middle 将 图 片 列表 中 的 
图 片 放置 在 父 元 素 .img 的 中 部 。 


10.4.4 首页 主体 内 容 的 CSS 编 写 
根据 对 首页 主体 内 容 的 分 析 和 首页 主体 内 容 的 XHTML 代码 ， 编 写 首页 主体 内 容 的 CSS 代 


码 如 下 。 


代码 10-13 


01 
02 


03 


04 
05 
06 


07 
08 
09 
10 
11 
2 


.trends{background:#FAFAFA;padding:0 0 8px;} 

.trends img{float:left;padding:lpx;border:lpx solid #ccc; 

margin:0 lO0px;display:inline;} 

.trends .txtList{margin-left:378px; 

border-left:lpx dotted #ccc;padding:0 0 0 1l0px;} 

.trends .head-l{margin:0 0 8px;} 

.special{border:lpx solid #F58827;background:#FAF2E6;height:153px;} 
-Special h2{float:left;font-size:14px;background:#E43401;width:30px; 
height:138px;color:#fff;text-align:center;padding:l5px 0 0;} 
.Special .more{text-align:right;padding:0 lO0px 0 0; } 

.Special .more a{color:#E12E25;} 

.special .scroll{overflow:hidden;width:660px;margin:0 auto;} 
.special .picList{width:1000px;} 

.special .picList li{margin:0 20px 0 0;} 
.gatherNews{background:url("../images/gatherNewsBg.gif") 

repeat-x 0 0 #fff;} 


第 01~04 行 是 政府 动态 的 样式 ， 其 中 第 02 行 通过 float:left 将 图 片 置 于 左 侧 ， 并 通过 
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display:inline 解 决 了 图 片 在 下 6 下 的 双边 距 问 题 。 第 05~11 行 是 专题 报道 的 样式 ， 其 中 第 06 行 
通过 float:left 将 标题 置 于 左 侧 ， 第 09 行 通过 “overflow:hidden:width:660px;” 限 制 了 滚动 图 片 
列表 最 外 层 容器 的 宽度 。 第 12 行 是 教育 实践 活动 、 招 商 引资 及 服务 指南 3 个 模块 最 外 层 容 器 


10.4.5 内 页 主体 内 容 的 CSS 编 写 


根据 对 内 页 主体 内 容 的 分 析 和 内 页 XHTML 代码 ， 编 写 内 页 主体 内 容 的 CSS 代 码 如 下 。 


代码 10-14 

01 .introduce{background:#FAFAFA;padding:0 0 186px;} 

02 .introduce .head-l{margin:0 0 50px 0;} 

03 .introduce .head-1 h2{font-size:14px;} 

04 .introduce p{font-size:18px;text-indent:2em;margin:20px 80px 0;} 


第 01~04 行 是 内 页 中 京 办 介绍 模块 的 样式 。 其 中 第 04 行 通过 text-indent:2em 将 每 段 文字 设 
置 为 向 右 缩 进 2 个 汉字 。 


10.4.6 网 站 CSS 代 码 总 览 


前 面 讲解 了 页 面 头 部 、 页 脚 、 页 面 主体 内 容 、CSS 重 置 和 页 面 公用 的 CSS 代 码 ， 这 些 代 
码 共同 组 成 了 网 站 页 面 的 完整 CSS 代 码 ， 如 代码 10-15 所 示 。 


代码 10-15 


@charset "utf-8"7 
/*css reset*/ 


/*global css*/ 


/*module css*/ 

/*index.html*/ 

.trends{background:#FAFAFA;padding:0 0 8px;} 

.trends img{float:left;padding:lpx;border:lpx solid #ccc; 
margin:0 lO0px;display:inline;} 


/*page.html*/ 
.introduce{background:#FAFAFA;padding:0 0 186px;} 
.introduce .head-l{margin:0 0 S50px 0;} 


兴 省 略 的 代码 在 每 个 小 节 中 都 有 讲解 ， 这 里 不 再 欣 述 。 
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10.5 制作 中 需要 注意 的 问题 


10.5.1 marquee 


文字 滚动 一 般 用 的 是 <marquee></marquee> 标 签 ， 标 签 里 面 是 需要 滚动 的 文字 内 容 。 这 个 


标签 有 下 面 几 个 属性 : 


e@ ”direction 表示 滚动 的 方向 ， 值 可 以 是 left、right、up、down， 默 认为 left。 


behavior 表示 滚动 的 方式 ， 值 可 以 是 scroll (连续 滚动 ) 、slide (滑动 一 次 ) 、 
alternate (来 回 滚动 )。 

loop 表示 循环 的 次 数 ， 值 是 正 整数 ， 默 认为 无 限 循环 。 

scrollamount 表示 运动 速度 ， 值 是 正 整数 ， 默 认为 6。 

scrolldelay 表示 停顿 时 间 ， 值 是 正 整 数 ， 默 认为 0， 单 位 是 毫秒 。 

valign 表示 元 素 的 重 直 对 齐 方式 ， 值 可 以 是 tpp、middle、bottom， 默 认为 middle。 
align 表示 元 素 的 水 平 对 齐 方式 ， 值 可 以 是 left、center、right， 默 认为 left。 

bgcolor 表示 运动 区 域 的 背景 色 ， 值 是 十 六 进 制 的 RGB 颜色 ， 默 认为 白色 。 
height、width 表示 运动 区 域 的 高 度 和 宽度 ， 值 是 正 整数 〈 单 位 是 像素 ) 或 百分数 ， 
默认 width=100% height 为 标签 内 元 素 的 高 度 。 

hspace、vspace 表示 元 素 到 区 域 边界 的 水 平 距离 和 垂直 距离 ， 值 是 正 整数 ， 单 位 是 像素 。 


<marquee> 并 不 是 一 个 标准 的 HTML 标签， 如果 把 带 有 <marquee> 的 网 页 提交 到 W3C 万 维 网 标准 
化 组 织 〈http://validatorw3.org/) 去 认证 的 话 ， 会 报 语法 错误 。<marquee> 最 开始 专用 于 正 浏览 
器 ， 后 来 火狐 浏览 器 和 谷歌 浏览 器 也 支持 <marquee> 标 签 。 如 果 要 符合 W3C 标 准 ， 需 要 使 用 UL 
标签 配合 JavaScript 脚 本 实现 。 


10.5.2 word-spacing 


word-spacing 用 于 修改 字 间 距离 。 这 里 的 “ 字 ”， 简 单 地 说 ， 可 以 是 任何 非 空白 字符 组 


成 的 


， 并 由 某 种 空白 符 包 围 ， 所 以 象形 文字 是 无 法 指定 字 间 隔 的 ， 除非 字 之 间 有 空格 。 因 


此 ， 这 个 属性 主要 是 针对 英文 单词 的 ， 若 要 使 其 对 中 文 起 作用 ， 需 要 在 中 文 之 间 加 空 
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电子 商务 网 站 是 基于 浏览 器 ， 买 卖 双方 不 谋面 地 进行 各 种 商贸 活 
动 ， 实 现 消费 者 的 网 上 购物 、 商 户 之 间 的 网 上 交易 和 在 线 电 子 支 付 
等 。 电 子 商务 网 站 涵盖 的 功能 模块 较 多 ， 但 是 样式 和 结构 相似 的 模块 
也 很 多 ， 有 效 并 准确 的 提炼 相同 的 XHTML 和 CSS， 并 重复 使 用 是 制 
作 电 子 商务 网 站 的 关键 技巧 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


网 站 效果 图 分 析 : 将 页 面 拆 分 ， 对 每 个 模块 进行 分 析 。 

网 站 布局 规划 和 切 图 : 对 网 站 页 面 进行 布局 规划 和 切 图 ， 
并 导出 图 片 。 

XHTML 编写: XHTML 框架 搭建 ， 网 站 公共 模块 的 XHTML 编 
写 ; 各 页 面 主体 内 容 的 XHTML 编写 。 

CSS 编 写 : 网 站 公用 样式 的 编写 ; 网 站 公共 模块 的 CSS 编 
写 ; 网 站 框架 的 CSS 编 写 ; 各 页 面 主 体内 容 的 CSS 编 写 。 
制作 中 的 注意 事项 。 


洛 本 章 将 主要 讲解 电子 商务 网 站 的 DIV+CSS 页 面 制作 。 以 唯 品 会 网 站 为 例 ， 运 用 DIV+CSS 技 术 
进行 了 网 站 重 构 。 电 子 商务 网 站 由 于 商品 多 ， 展 现形 式 丰富 ， 相 比较 其 他 类 型 的 网 站 ， 制 作 起 
来 也 更 复杂 。 


» 


本 节 将 主 


11.1 页 面 效 果 图 分 析 


对 网 站 效果 图 进 


行 分 析 ， 包 括 页 面 头 部 和 页 脚 分 析 、 首 页 主体 内 容 分 析 和 内 


页 主体 内 容 分 析 。 如 图 


本 图 。 


11.1 和 图 


11.2 所 示 的 两 张 图 分 别 是 截取 唯 品 会 网 站 的 首页 和 商品 页 的 页 
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于 
下 首页 的 XHTML 页 面 表示 为 index.html， 除 首页 外 的 其 他 页 面 统称 为 内 页 。 


11.1.1 头 部 和 页 脚 分 析 


页 面 的 头 部 ， 如 图 11.3 所 示 ， 包 括 网 站 标志 、 导 航 1、 导 航 2、 购 物 袋 和 导航 3， 分 别 对 应 
图 中 的 OO@@@. 

网 站 标志 是 一 张 图 片 ， 导 航 1、 导 航 2 和 导航 3 都 是 由 文字 组 成 的 链接 ， 购 物 袋 由 文字 和 
数字 组 成 。 


特卖 会 。 。 天 而 乔 。 。 叭 品 团 。。 口 于 机 版 ©@ NB 400-6789.568 © RFSR 和 会务- 


图 11.3 页 面 头 部 


在 布局 上 ， 导 航 1 分 为 左右 两 栏 。 网 站 标志 、 导 航 2 及 购物 袋 分 为 左右 两 栏 ， 其 中 网 站 标 
志 是 左 栏 ， 向 左 浮动 ， 导航 2 和 购物 袋 都 是 右 栏 ， 分 别 向 右 浮动 。 导 航 3 也 分 为 左右 两 栏 。 

页 脚 ， 如 图 11.4 所 示 ， 由 更 多 品牌 、 导 航 1、 导 航 2、 版 权 及 网 站 认证 组 成 ， 分 别 对 应 图 
中 0O@@@. 这 5 个 部 分 按照 CSS 正 常 文档 流 自 上 而 下 顺序 排列 ， 其 中 更 多 品牌 是 一 段 文字 
链接 ， 导 航 1 和 导航 2 都 是 文字 链接 列表 ， 版 权 是 一 段 文 字 ， 网 站 认证 是 一 组 图 片 列表 。 


铺 您 希 革 在 哈 品 会 买 到 哪些 品牌 >> 


服务 保障 购物 指南 
是 


品 保 证 


图 11.4 页 脚 


11.1.2 首页 主体 内 容 分 析 


首页 的 主体 内 容 ， 如 图 11.5 所 示 ， 版 块 划分 比较 清晰 ， 包 括 最 新 特卖 、 服 务 承诺 、 上 
市 公司 、365 基 金 、 用 户 评价 、 新 品牌 开 售 预告 、 最 后 疯 抢 和 即将 推出 ， 分 别 对 应 图 中 的 
Oooeo@o@06@. 
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图 11.5 首页 的 主体 内 容 


服务 承诺 、 上 市 公司 和 365 基 金 这 3 部 分 内 容 在 展现 形式 上 采用 流行 的 Tab 切 换 效果 。 
最 新 特卖 、 最 后 疯 抢 和 即将 推出 这 3 部 分 是 主要 品牌 展示 区 域 ， 都 是 由 标题 和 一 组 相 
似 的 模块 组 成 ， 每 个 模块 都 包含 商品 图 片 和 品牌 信息 。 

用 户 评价 由 标题 和 用 户 评论 列表 组 成 ， 其 中 每 个 用 户 评论 包含 了 用 户头 像 、 用 户 名 
和 评论 内 容 。 

新 品牌 开 售 预告 由 标题 和 一 组 品牌 标志 组 成 。 


在 首页 主体 内 容 的 各 版 块 中 ， 最 新 特卖 是 左 栏 ， 向 左 浮动 。 服 务 承诺 、 上 市 公司 、365 


基金 、 


户 评价 及 新 品牌 开 售 预告 是 右 栏 ， 向 右 浮动 。 最 后 疯 抢 和 即将 推出 ， 没 有 浮动 和 定 


位 ， 是 正常 文档 流 。 
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11.1.3 内 页 主体 内 容 分 析 


商品 页 的 主体 内 容 ， 如 图 11.6 所 示 ， 包 括 商 品 banner 和 商品 分 类 信息 ， 分 别 对 应 图 中 的 OO。 


@ 商品 banner 是 一 张 展示 该 品牌 热卖 商品 的 图 片 ， 每 个 热卖 商品 都 有 链接 可 以 引导 用 户 
浏览 相关 商品 的 具体 信息 。 
e 商品 分 类 信息 由 商品 信息 功能 和 商品 展示 列表 组 成 。 其 中 ， 商 品 信息 功能 包含 商品 
分 类 功能 、 折 扣 价 格 等 排序 功能 和 分 页 功能 。 商 品 展示 列表 由 若干 商品 模块 组 成 ， 
每 个 商品 模块 包含 商品 图 片 、 品 牌 名 称 、 商 品名 称 和 价格 。 
商品 banner、 商 品 信息 功能 及 商品 展示 列表 不 做 任何 浮动 和 定位 ， 自 上 而 下 顺序 排列 ， 
是 正常 的 CSS 文 档 流 。 
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司 11.6 商品 页 的 主体 内 容 
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11.2 布局 规划 及 切 图 


本 节 将 主要 介绍 唯 品 会 网 站 的 页 面 布局 规划 、 页 面 图 片 切割 并 导出 图 片 。 这 些 工 作 是 制 
作 本 章 案例 前 的 必要 步骤 。 


11.2.1 页 面 布局 规划 


根据 前 面 对 网 站 效果 图 的 分 析 ， 为 了 后 面 写 出 清晰 简洁 的 XHTML 代码 ， 对 页 面 的 整体 
结构 进行 了 提炼 ， 得 到 了 页 面 的 大 致 布局 图 ， 图 11.7 是 首页 的 页 面 布局 图 ， 图 11.8 是 商品 页 的 


图 11.7 首页 布局 


11.2.2 切割 首页 及 导出 图 片 


电子 商务 网 站 在 制作 页 面 时 需要 切割 的 图 片 比较 多 ， 包 括 永久 图 片 和 临时 图 片 两 种 。 
永久 图 片 包括 网 站 标志 、 网 站 背景 图 、 小 图 标 等 ， 临 时 图 片 包括 商品 图 片 、 促 销 活动 海报 、 
广告 等 。 本 例 中 ， 由 于 小 图 标 和 背景 较 多 ， 为 了 减少 页 面 请 求 及 减少 图 片 总 大 小 ， 采 用 CSS 
Sprites 技 术 将 部 分 切 好 的 图 片 进行 合并 。 所 有 页 面 头 部 的 小 图 标 合并 为 图 片 hdt_imgs.png、 
所 有 页 脚 的 小 图 标 合并 为 图 片 信 imgs.png、 所 有 右 侧 信息 用 到 的 小 图 标 和 背景 图 合并 为 图 片 
right_imgs.png、 主 体内 容 中 所 有 版 块 中 的 标题 背景 图 片 合并 为 图 片 index_title.png、 右 侧 新 品 
牌 开 售 预告 的 日 期 切换 时 各 种 状态 用 到 的 背景 图 合并 为 图 片 notice.png。 没 有 合并 的 图 片 包 
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括 : 品牌 介绍 的 小 图 标 icoInfo png、 首 页 主体 内 容 的 背景 图 mdexBg:jpg、 网 站 标志 logopng、 
首页 右 侧 的 “服务 承诺 ”、“ 上 市 公司 ”和 “365 基 金 ” 的 标题 用 到 的 背景 图 tab.gif、 网 站 头 
部 的 导航 1 的 背景 图 topNav-1.gif、 网 站 头 部 的 导航 3 的 背景 图 topNav-3.gif。 

义 上 都 是 永久 性 图 片 ， 临 时 图 片 位 于 Temp 文 件 夹 中 ， 包 括 : 最 新 特卖 中 的 商品 图 片 
p1.jpg-~p5jpg、 最 后 疯 抢 中 的 商品 图 片 p6:jpg-p8.jpg、 即 将 推出 中 的 商品 图 片 p9jpg~pl11jpg、 
右 侧 用户 评 价 中 的 用 户头 像 ul.giE、 新 品牌 开 售 预告 中 的 商家 标志 logol.jpg~logol11.jpg、 唯 品 
会 二 维 码 图 片 codel.gif 剑 code2.gif、 页 脚 中 网 站 认证 的 图 片 foot 01.jpg~foot 10.jpg。 

图 11.9 是 首页 在 Photoshop 中 的 所 有 切片 。 


= tpNav-1.gif 


codel.gif code2.gif 


Pg 
守 


图 11.9 首页 在 Photoshop 中 的 所 有 切片 


3 党 图 中 没有 标注 名 称 的 切片 是 已 经 被 合并 的 图 片 。 
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11.2.3 切割 内 页 及 导出 图 片 
商品 页 的 头 部 和 页 脚 与 首页 中 的 相同 ， 所 以 这 两 部 分 的 图 片 就 不 需要 重复 切割 了 ， 只 需 


要 主体 内 容 区 的 图 片 即 可 ， 包 括 : 分 类 信息 功能 中 的 “只 显示 有 货 商 品 ”、“ 折 扣 ” 和 “ 价 
按钮 用 到 的 背景 图 productBtn.png。 临 时 图 片 包括 : 商品 图 片 product 01.jpg~product 08. 


的 编写 。 语 


名 ， 


商品 Banner 的 背景 图 productl.jpg。 
P Jpg 


如 图 11.10 所 示 是 商品 页 在 Photoshop 中 的 所 有 切片 。 
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图 11.10 商品 页 在 Photoshop 中 的 所 有 切片 


11.3 XHTML 编写 


本 节 将 详细 讲解 页 面 头 部 和 页 脚 、 页 面 公共 部 分 、 页 面 框架 和 每 个 页 面 的 XHTML 代码 


此 XHTML 的 编写 虽然 简单 ， 但 很 重要 。 


义 和 结 构 良好 的 XHTML 代码 不 仅 在 制作 网 站 时 省 时 省 力 ， 更 有 利于 提高 网 站 排 
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11.3.1 页 面 的 XHTML 框架 搭建 


首页 和 商品 页 的 XHTML 框架 相同 ， 包 括 3 部 分 : 头 部 、 主 体内 容 和 页 脚 ，id 分 别 为 hd、 
bd 和 ft。 但 由 于 首页 与 商品 页 的 主体 内 容 背 景 不 同 ， 因 此 ，#bd 容 器 分 别 增加 了 不 同 的 class 样 
式 。 首 页 的 XHTML 框架 编写 如 下 。 

代码 11-1 

01 i 

02 <div id="hd" class="cf"></div> 

03 <I=-—end of hd=-> 

04 <l-—start of bd—=> 

05 <div id="bd" class="index"></div> 

06 <l-end of bd==> 

07 3 

08 <div id="ft" class="whiteBg cf"></div> 

09 3 二 


第 02 行 是 页 面 头 部 ， 第 05 行 是 页 面 主 体内 容 ， 第 08 行 是 页 脚 ， 其 他 行 代码 是 注释 。 
斑 由 于 网 站 头 部 和 页 脚 的 导航 背景 图 在 横向 上 都 是 占 满 整 个 屏幕 ， 因 此 包含 网 站 头 部 和 页 脚 的 容 


器 不 能 限制 宽度 ， 即 本 例 的 所 有 页 面 都 没有 页 面 最 外 层 容器 #doc。 


商品 页 的 者 d 容 器 增加 了 样式 . product ， 商 品 页 的 XHTML 框架 编写 如 下 。 


代码 11-2 


09 


一 二 号 有 下 全 起 丰 GE==> 

<div id="hd" class="cf"></div> 
-=end oF hd=> 

l="gtartior Dd 

<div id="bd" class=" product"></div> 
===end ofrbd==> 

KL-=atart oF 下 三 

<div id="ft" class="whiteBg cf"></div> 
< endor 天 下 二 一 全 


第 02 行 是 页 面 头 部 ， 第 05 行 是 页 面 主体 内 容 ， 第 08 行 是 页 脚 ， 其 他 行 代码 是 注释 。 
11.3.2 页 面 头 部 和 页 脚 的 XHTML 编 写 
根据 前 面 对 页 面 头 部 的 分 析 ， 由 于 导航 1 的 文字 链接 有 比较 复杂 的 背景 图 片 及 小 图 标 ， 


因此 左右 两 栏 都 使 用 ul 列表 标签 ， re te he 
导航 2 的 每 个 链接 用 竖 线 分 隔 ， 个 别 链接 有 小 图 标 ， 利 用 a 标签 编写 比较 方便 。 导 航 3 
于 在 瞩 标 移 到 链接 上 时 文字 的 背景 有 宽度 和 高 度 的 要 求 ， 并 且 在 “ 美 妆 ”、“ 明 天 上 线 ” 
和 “在 售 商 品 分 类 ”这 3 个 链接 上 都 有 各 自 的 小 图 标 ， 因 此 也 用 l 列 表 标 签 实现 ， 与 导航 1 不 
同 的 是 导航 3 应 用 一 个 ul 标签 即 可 ，“ 在 售 商 品 分 类 ”所 在 的 li 标签 向 右 浮动 就 可 以 实现 页 面 
上 的 布局 。 编 写 头 部 的 XHTML 代码 如 下 。 
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代码 11-3 
01 <xdiv id="hd" class="cf"> 
02 <div class="topNav-1"> 
03 <div class="w1001 cf"> 
04 <ul class="]left fl"> 
05 <li class="current"><a href="#"> 特 卖 会 </a></1i> 
06 <1i><a href="#"> 爱 丽 奢 </a></1i> 
07 #"> 唯 品 团 </a></1i> 
08 co mobilePhone"> 
"> 手机 版 </a></1i> 
09 </ul> 
10 <ul class="right fr"> 
hm <li class="ico telPhone arial"> 
<a href="#" class="fs14">400…8</a></1i> 
12 <li class="ico contactUs"> 
<a href="#"> 联 系 客服 </a></1i> 
13 <li class="ico vipService"> 
<a href="#"> 会 员 服务 </a></1i> 
14 </ul> 
15 </div> 
16 </div> 
Lp <div class="w1001 cf"> 
18 <hl class="fl"><a href="#"> 了 唯 品 会 </a></h1> 
19 <div class="topNav-2 fr"><span> 您 好 ， 欢 迎 来 到 唯 品 会 ! 请 </span> 
<a href="#"” class="pink"> 登 录 </a>1<a href="#" class="pink"> 
免费 注册 </a>1<a href="#"> 购 物 袋 </a>|<a href="#"> 
我 喜欢 的 品牌 </a>1<a href="#" class="ico order"> 我 的 订单 
</a>1<a href="#"> 唯 品 卡 </a>1<a href="#"> 积 分 兑换 
</a>1<a href="#" class="ico fashion"> 时 尚 会 
</a>|1<a href="#"> 爱 心 基金 </a>|<a href="#" class="ico focus"> 关 注 
</a></div> 
20 <div class="ico shopping fr"> 特 卖 … 袋 
<strong class="pink arial">0</strong></div> 
21 </div> 
22 <div class="topNav-3"> 
2 <div class="w1001"> 
24 <ul class="cf"> 
25 <li class="current"><a href="#"> 所 有 品牌 </a></1i> 
26 <li><a href="#"> 女 士 </a></1i> 
27 <1i><a href="#"> 男 士 </a></1i> 
28 <1i><a href="#"> 儿 童 </a></1i> 
29 <1i><a href="#"> 居 家 </a></1i> 
30 <li class="ico beauty"><a href="#"> 美 妆 </a></1i> 
3 <1i class="ico willOonLine"> 
<a href="#"> 明 天 上 线 </a></1i> 
人 <1i class="1c0 class”> 
<a href="#"> 在 售 商品 分 类 </a></1i> 
33 </ul> 
34 </div> 
35 </div> 
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36 </div> 

第 01 行 和 第 36 行 是 头 部 的 最 外 层 容器 标签 ， 第 02~16 行 是 导航 1， 其 中 第 04~09 行 是 导航 
1 的 左 栏 ， 第 10~14 行 是 导航 1 的 右 栏 ， 都 使 用 ul 列表 标签 实现 。 第 17~21 行 的 代码 包含 了 网 站 
标志 、 导 航 2 和 购物 袋 3 部 分 。 其 中 第 02 和 第 21 行 是 这 3 部 分 的 最 外 层 容器 ， 第 18 行 是 网 站 标 
志 ， 在 前 面 的 章节 中 讲 过 ， 网 站 的 标志 是 网 站 中 最 重要 的 部 分 ， 为 了 便于 搜索 引擎 抓 取 ， 应 
使 用 权重 最 高 的 h1 标 签 。 第 19 行 是 导航 2， 其 中 ，“ 您 好 ， 欢 迎 来 到 唯 品 会 ! 请 ”这 几 个 字 
不 是 链接 ， 使 用 了 span 标 签 包含 这 几 个 文字 ， 其 他 都 是 链接 ， 即 使 用 了 a 标 签 ， 每 个 链接 用 
“|” 线 分 隔 ，“|” 线 在 键盘 上 可 以 找到 ， 位 于 “}/]” 旁 边 。 第 20 行 是 购物 袋 ， 购 物 袋 中 的 数 
字 应 用 了 strong 标 签 实现 ， 一 是 为 了 方便 单独 编写 数字 的 样式 ， 二 是 strong 标 签 在 HTML 中 的 
语义 是 强调 、 重 要 。 第 22~35 行 是 导航 3， 使 用 ul 列表 标签 实现 。 在 ul 中 的 1i 标 签 上 定义 向 左 或 


向 右 浮动 ， 也 可 


根据 前 面 对 
dt 标签 和 若干 个 


以 实现 左右 栏 布 局 。 
| 页 脚 的 分 析 ， 导 航 1 是 由 7 组 链接 组 成 的 列表 ， 每 组 链接 使 用 dl 标签 ， 包 含 1 个 
dd 标签 组 成 ，dt 标 签 在 HTML 中 的 语义 是 表示 一 组 列表 项 的 标题 ， 用 在 此 处 最 


合适 不 过 。 通 过 为 每 个 dt 标签 上 定义 1 个 样式 名 ， 实 现 了 每 个 标题 前 面 不 同 的 小 图 标 效果 。 导 
航 2 与 页 面 头 部 的 导航 2 相似 ， 也 用 “|” 分 隔 每 个 链接 ， 因 此 也 使 用 若干 a 标 签 组 成 了 导航 2 的 


文字 链接 列表 。 
代码 11-4 


页 脚 的 XHTML 代码 编写 如 下 。 


01 <div id="ft" class="whiteBg cf"> 


<div class="ico moreBrand"><a href="#"> 您 希望 在 唯 品 会 买 到 哪些 品牌 >></a></div> 
<div class="bomNav-1 w1001"> 

<dl class="fl borderRight"> 
<dt class="ico security"> 服 务 保障 </dt> 
<dd> 正 品 保证 </dd> 
<dd>7 天 无 条 件 退货 </dd> 
<dd> 退 货 免 运费 </dad> 
<dd>7x15 小 时 客户 服务 </dd> 

</dl> 

<dl class="f] borderRight"> 
<dt class="ico shop"> 购 物 指南 </dt> 
<qdd> 导 购 演示 </dd> 
<dd> 订 单 操作 </dd> 
<dd> 会 员 注册 </dd> 
<dd> 账 户 管理 </dd> 
<dd> 收 货 样品 </dd> 
<dd> 会 员 等 级 </dd> 

</dl> 

<dl class=" 引 borderRight"> 
<dt class="ico buy"> 支 付 方式 </dt> 
<dd>23 家 主流 网 银 支付 </dd> 
<dd> 货 到 付款 </dd> 
<dd> 支 付 宝 、 银 联 等 支付 </dd> 
<dd> 信 用 卡 支付 </ad> 
<dd> 唯 品 钱包 支付 </dd> 

</dl> 

<dl class="fl borderRight"> 
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29 <dt class="ico send"> 配 送 方式 </at> 

30 <dd> 全 场 满 288 元 免 运 费 </dd> 

3 <dd> 配 送 范围 及 运费 </dda> 

32 <dd> 验 货 与 签收 </ad> 

EF </dl> 

34 <dl class="f] borderRight"> 

35 <dt class="ico service"> 售 后 服务 </dt> 

36 <qq> 退 货 政策 </dd> 

37 <dd> 退 货 流 程 </dd> 

38 <dd> 退 款 方式 和 时 效 </dd> 

39 </dl> 

40 <dl class="fl borderRight"> 

41 <dt class="ico code"> 唯 品 会 客户 端 二 维 码 </dt> 

42 <dd class="noIco"><img src="temp/codel.gif"> 

<a href="#"> 下 载 …</a></dd> 

43 </dl> 

44 <dl class="fl"> 

45 <dt class="ico weChat"> 用 微 信 扫 一 扫 </adt> 

46 <dd class="noIco"><img src="temp/code2.gif"> 

<a href="#"> 订 阅 …</a></dd> 

47 </dl> 

48 </div> 

49 <div class="bomNav-2"><a href="#"> 关 于 我 们 </a>| 
<a href="#">About us</a>|<a href="#">Investor Relations 
</a>1<a href="#"> 媒 体 报道 </a>|<a href="#"> 品 牌 招商 </a>1 
<a href="#"> 隐 私 条 款 </a>1<a href="#"> 友 情 链接 </a>|<a href="#"> 唯 品 诚 聘 
</a>1<a href="#">365 爱 心 基 金 </a>1<a href="#"> 唯 品 卡 </a>1 
<a href="#"> 用 户 体验 提升 计划 </a>1<a href="#"> 唯 品 地 图 </a></div> 

50 <div class="copyRight wl1001 arial">Copyright @ 2008… 协 议 。 
<br/> 版 权 … 公 司 </div> 

hl <div class="img wl001"><a href="#" target=" blank"> 
<img src="temp/foot 01.jpg" width="105" height="40" /></a>… 
<a href="#" target=" blank"><img src="temp/foot _ 10.jpg" 
width="77" height="40" /></a></div> 

52 </div> 


第 01 行 和 第 52 行 是 页 脚 的 最 外 层 容 器 标签 ， 第 02 行 是 更 多 品牌 ， 第 03~48 行 是 导航 1， 第 


49 行 是 导 


航 2， 第 50 行 是 版 权 ， 第 51 行 是 网 站 认证 。 


11.3.3 页 面 公共 部 分 的 XHTML 编写 


在 本 章 案例 中 ， 页 面 的 公共 部 分 包括 页 面 头 部 和 页 脚 ， 如 图 11.11 所 示 。 页 面 头 部 和 页 肢 
的 XHTML 代码 在 前 面 已 经 讲 过 了 ， 这 里 不 再 发 述 。 


和 仔细 观察 首页 和 商品 页 的 页 脚 可 以 发 现 ， 首 页 的 页 脚 比 商 品 页 多 了 一 个 版 块 : 更 多 品牌 。 页 脚 

”由 5 个 版 块 组 成 ， 每 个 版 块 单独 删除 不 会 影响 其 他 版 块 的 布局 和 样式 ， 唯 品 会 的 网 站 由 许多 子 
页 面 组 成 ， 每 个 子 页 面 可 以 根据 需要 随意 删除 其 中 任意 一 个 或 几 个 版 块 ， 因 此 ， 这 里 把 页 脚 的 
5 个 版 块 都 作为 页 面 的 公共 部 分 。 
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11.3.4 首页 主体 内 容 的 XHTML 编写 


首页 主体 内 容 的 最 新 特卖 、 最 后 疯 抢 和 即将 推出 ， 这 3 个 模块 的 XHTML 结构 相似 : 标题 
都 是 一 张 背景 图 片 ， 上 下 左右 间距 相同 ， 图 片 的 边框 宽度 和 颜色 相同 ， 每 张 图 片上 都 有 一 个 
半 透 明 的 白色 遮 站 层 ， 每 张 图 片 都 有 XX 品 牌 专 场 和 品牌 介绍 ， 鼠 标 移动 到 图 片上 时 图 片 边 
框 和 图 片 相关 信息 的 背景 颜色 都 变 为 枚 红色 ， 同 时 图 片 相关 信息 的 文字 都 变 为 白色 。 服 务 承 
诺 、 上 市 公司 和 365 基 金 ， 这 3 部 分 由 于 是 Tab 切 换 效果 ， 因 此 它们 的 标题 结构 相似 。 首 页 主体 


内 容 的 XHTML 代 码 编写 如 下 。 
代码 11-5 
01 <div id="bd" class="index"> 
02 <div class="w1001 cf"> 
03 <div class="newest fl"> 
04 <h2> 最 新 特卖 </h2> 
05 <ul> 
06 <li class="brand"><a href="#" target=" blank"> 


<img src="temp/pl.jpg" /> 

<div class="summary"><h3>… 专 场 </h3> 

<span class="intro"> 品 牌 介绍 </span> 剩 余 … 秒 

</div><div class="summaryBg"></div></a></1i> 
07 <li class="brand"><a href="#" target=" blank"> 

<img src="temp/p2.jpg" /> 

<div clas summary"><h3>… 专 场 </h3> 

<span class="intro"> 品 牌 介绍 </span> 剩 余 … 秒 

</div><div class="summaryBg"></div></a></1i> 
08 <1i class="brand"><a href="#" target=" blank"> 

<img src="temp/p3.jpg" /> 

<div class: summary"><h3>… 专 场 </h3> 

<span class="intro"> 品 牌 介绍 </span> 剩 余 … 秒 

</div><div class="summaryBg"></div></a></1i> 
09 <1i class="brand"><a href="#" target=" blank"> 

<img src="temp/p4.jpg" /> 

<div class= summary"><h3>… 专 场 </h3> 

<span class="intro"> 品 牌 介 绍 </span> 剩 余 … 秒 

</div><div class="summaryBg"></div></a></1i> 
10 <1i class="brand"><a href="#" target=" blank"> 

<img src="temp/p5.jpg" /> 

<div class="summary"><h3>… 专 场 </h3> 

<span class="intro"> 品 牌 介绍 </span> 剩 余 … 秒 


</div><div class="summaryBg"></div></a></1i> 


EE </ul> 

于 多 </div> 

3 <div class="right fr"> 

14 <h2 class="promise100">100$ 正 品 保证 </h2> 

15 <div class="tab border whiteBg"> 

16 <div class="borderWhite"> 

17 <ul class="tabHd"> 

18 <1i class="current pink"> 服 务 承 诺 </1i> 
19 <li class="cen"> 上 市 公司 </1i> 
20 <1i>365 基 金 </1i> 

2 </ul> 

22 <div class="tabContent show"> 
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</div> 
</div> 


</div> 


<dl class="ico promise-1"> 
<qqd> 唯 品 会 … 经 过 授权 ; 
<br/> 并 由 … 承 保 。</dd> 

</dl> 

<dl class="ico promise-2"> 
<dt class="pink"> 
支持 货 到 付款 </at> 
<dd> 唯 品 会 … 验 货 。</dd> 

</dl> 

<dl class="ico promise-3"> 
<dt class="pink"> 
七 天 无 条 件 退 货 </ dt> 
<dd> 无 论 何 种 原因 ， 
… 完 善 售后 ， 退 货 无 忧 。</dd> 

</dl> 

<dl class="ico promise-4"> 
<dt class="pink"> 
退货 免 邮 </at> 
<dq> 如 发 生 退货 ， 我 们 表示 抱歉 
… 的 运费 。</qdd> 

</dl> 


<div class="tabContent"> 上 市 公司 内 容 


</div> 


<div class="tabContent">365 基 金 内 容 </div> 


<div class="comment border whiteBg"> 
<div class="borderWhite"> 
<h4 class="ico title"> 用 户 评价 </h4> 


</div> 
</div> 


<ul> 


</ul> 


<1i class="ico sinaTwitter"> 
<img src="temp/ul.gif"/><p><a 
href="#">@ 二 货 -_- 炎 小 曦 
</a> 很 开心 … 手 快 。@</p></1i> 

<li class="ico sinaTwitter"> 
<img src="temp/ul.gif"/><p><a 
href="#">@ 幸 福 的 蜜 糖 镀 </a> 最 近 恋 上 @ 
唯 品 会 . . .又 好 </p></1i> 

<li class="ico sinaTwitter noBorderBom"> 
<img src="temp/ul.gif"/><p> 

<a href="#">@ 沐 月 -jing</a> 

@ 唯 品 会 太 给 力 了 … 就 到 手 了 </p></1i> 


<div class="notice border whiteBg"> 
<div class="borderWhite"> 
<h4> 新 品牌 开 售 预告 </h4> 


<ul class="tabHd"> 


<li class="day-1 current"> 
明天 <br/>12/01</1i> 
<li class="day-2"> 
后 天 <br/>12/02</1i> 
<1i class="day-2"> 
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周二 <br/>12/03</1i> 
60 <li class="day-2"> 
周三 <br/>12/04</1i> 


61 </ul> 

62 <div class="tabContent cf show"> 

63 <span><a href="#" target=" blank"> 
<img src="temp/1ogol.jpg" 
width="98" height="48" /></a> 

64 </span>… 

65 <span><a href="#" target=" blank"> 
<img src="temp/1ogol1.jpg" 
width="98" height="48" /></a></span> 

66 </div> 

67 <div class="tabContent cf"> 

后 天 预 售 品牌 </div> 

68 <div class="tabContent cf"> 

周二 预 售 品牌 </div> 

69 <div class="tabContent cf"> 

周三 预 售 品牌 </div> 

70 </div> 

TE </div> 

Te </div> 

3 <div class="last cl"> 

74 <h2> 最 后 疯 抢 </h2> 

75 <ul> 

76 <1i class="brand fl"><a href="#" target=" blank"> 

<img src="temp/pll.jpg" /> 


<div class="summary"><span class="intro"> 
品牌 介绍 </span><h3 class="mbl5"> 韩 派 HAP 家 电 专场 
</h3><span class="discount fr">1.2 折 起 
</span> 剩 余 1 天 07 时 20 分 27 秒 </div> 


<div class="summaryBg"></div></a></1i> 


77 0 
78 <1i class="brand fl"><a href="#" target=" blank"> 
<img src="temp/p8.jpg" /> 


<div class="summary"><span class="intro"> 

品牌 介绍 </span><h3 class="mb15"> 家 装 节 - 厨 房 卫 
浴 专 场 </h3><span class="discount fr">1.2 折 起 
</span> 剩 余 2 天 07 时 20 分 27 秒 </div> 


<div class="summaryBg"></div></a></1i> 


79 </ul> 

80 </div> 

81 <div class="will"> 

82 <h2> 即 将 推出 </h2> 

83 <ul> 

84 <li class="brand fl"><a href="#" target=" blank"> 


<img src="temp/p9.jpg" /> 
<div class="summary"><span class="intro mb15"> 
品牌 介绍 </span><h3 class="cl"> 迈 途 MERRTO 户 外 男装 


专场 </h3></div><div class="summaryBg"></div> 


</a></1i> 
85 wae 
86 <1i class="brand fl"><a href="#" target=" blank"> 


<img src="temp/pll.jpg" /> 
<div class="summary"><span class="intro mb15"> 
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品牌 介绍 </span><h3 class="cl"> 异 域 
灵性 Kerohanian 家 居 专 场 </h3></div> 


<div class="summaryBg"></div></a></1i> 


87 </ul> 
88 </div> 

89 </div> 

90 </div> 


第 01 行 和 第 90 行 是 首页 主体 内 容 的 最 外 层 容 器 #bd， 第 02 行 和 第 89 行 是 主体 内 容 的 另 一 
个 最 外 层 div 容 器 ， 这 个 容器 上 有 一 个 样式 .w1001， 这 个 样式 限制 了 内 容 区 的 宽度 。#bd 上 面 
没有 限制 宽度 是 因为 主体 内 容 有 一 个 从 上 到 下 的 颜色 渐变 背景 需要 铺 满 整个 电脑 屏幕 ， 但 是 
主体 内 容 要 在 屏幕 中 水 平 居中 ， 因 此 需要 增加 一 个 div 容 器 ， 以 限制 内 容 的 宽度 ， 进 而 利用 
margin:0 auto 使 实际 内 容 水 平 居中 显示 。 第 03~12 行 是 最 新 特卖 ， 其 中 第 04 行 是 最 新 特卖 的 标 
题 ， 第 05~11 行 是 由 ul 和 若干 标签 组 成 的 商品 图 文 列表 。 

第 13~42 行 是 右 侧 由 服务 承诺 、 上 市 公司 和 365 基 金 组 成 的 Tab 切 换 ， 其 中 第 17~21 行 是 
Tab 切 换 按 钮 ， 分 别 对 应 服务 承诺 、 上 市 公司 和 365 基 金 的 标题 ， 第 22~38 行 是 标题 服务 承诺 
对 应 的 主要 内 容 ， 第 39 行 是 标题 上 市 公司 对 应 的 主要 内 容 ， 第 40 行 是 标题 365 基 金 对 应 的 主 
要 内 容 。 第 43~52 行 是 用 户 评价 ， 其 中 第 45 行 是 用 户 评价 的 标题 ， 第 46~50 是 用 户 评价 列表 ， 
和 3 个 标签 组 成 。 

第 53~71 行 是 新 品牌 开 售 预告 ， 这 部 分 内 容 也 是 Tab 切 换 ， 其 中 第 55 行 是 新 品牌 开 售 的 标题 
第 56-61 行 是 由 新 品牌 开 售 日 期 组 成 的 Tab 按 钮 ， 第 62~69 行 是 每 个 开 售 日 期 对 应 的 促销 品牌 。 第 
73~80 行 是 最 后 疯 抢 ， 其 中 第 74 行 是 最 后 疯 抢 的 标题 ， 第 75~79 行 是 最 后 疯 抢 的 品牌 列表 ， 即 由 ul 
6 个 1i 标 签 组 成 的 图 文 列表 。 第 81~88 行 是 即将 推出 ， 与 最 后 疯 抢 结构 类 似 ， 其 中 第 82 行 是 即将 
推出 的 标题 ， 第 83~87 行 是 即将 推出 的 品牌 列表 ， 也 是 由 ul 和 6 个 上 标签 组 成 的 图 文 列表 。 


11.3.5 内 页 主体 内 容 的 XHTML 编 写 


商品 banner 的 图 片上 有 若干 个 本 品牌 在 本 季 的 热卖 商品 ， 每 个 热卖 商品 都 有 一 个 链接 ， 
户 单 击 链接 可 以 打开 相应 的 商品 具体 信息 页 面 。 商 品 banner 上 的 热卖 商品 图 片 一 般 都 是 没 
有 规律 的 排列 ， 形 式 丰 富 活泼 ， 因 此 需要 利用 绝对 定位 Position:absolute 将 各 热卖 商品 的 链接 
定位 到 精确 位 置 。 商 品 展示 列表 利用 nl 和 1i 标 签 将 各 商品 的 图 片 和 信息 展示 给 用 户 。 商 品 页 主 


-站 


体内 容 的 XHTML 代码 编写 如 下 。 
代码 11-6 
01 <div id="bd" class="product"> 
02 <div class="w1020 cf"> 
03 <div class="guide"> 
04 <a href="#" class="guidePic-1"></a> 
05 <a href="#" class="guidePic-2"></a> 
06 <a href="#" class="guidePic-3"></a> 
07 </div> 
08 <div class="detail"> 
09 <div class="functions"> 
10 <div class="class"><span> 分 类 : </span> 


<a href="#" class="selected"> 全 部 (284)</a> 
<a href="#"> 鞋 类 (284)</a></div> 
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DIV+CSSt55 H+2nts 全 


Lr <div class="fl btn"><a href="#" class="yes"> 
只 显示 有 货 商 品 </a><a href="#" class="discount"> 
折扣 </a><a href="#"” class="price"> 价 格 </a></div> 

ke <div class="fr page"><span> 共 284 条 </span> 
<a href="#" class="pagePre">&lt; 
</a><a href="#">1</a><a href="#">2</a> 
<a href="#">3</a><a href="#" 
class="pageNext">g&gt;</a></div> 


I$ </div> 

14 <ul class="productLists"> 

TS <li><a href="#"><img src="temp/ 
product_01.jpg”/></a><p> 水 之 彩 <a href="#"> 
黑色 牛皮 配 超 纤 水 钻 绑 带 坡 跟 矮 靴 


</a><span><strong>¥398</strong><em> (3.1 折 ) 
</em><del>¥1298</del></span></p></1i> 


16 

17 <li><a href="#"><img src="temp/product 08.jpg" /> 
</a><p> 水 之 彩 <a href="#"> 黑 色 牛 皮 魔 术 贴 内 增高 矮 靳 
</a><span><strong>¥468</strong><em> (2.9 折 ) 
</em><del>¥1598</del></span></p></1i> 

18 </ul> 

3 </div> 

20 </div> 

21 </div> 


第 01 行 和 第 21 行 是 内 页 主体 内 容 的 最 外 层 容 器 #bd， 第 02 行 和 第 20 行 是 主体 内 容 的 另 一 
个 最 外 层 div 容 器 ， 这 个 容器 上 有 一 个 样式 .w1020， 这 个 样式 限制 了 内 容 区 的 宽度 。#bd 里 面 
柑 套 一 层 div 容 器 的 原因 与 首页 一 样 ， 因 为 #5bd 上 面 有 背景 色 需 要 铺 满 整 个 电脑 屏幕 。 第 03~07 
行 是 商品 banner， 包 含 3 个 a 标签 ， 第 08~19 行 是 商品 分 类 信息 ， 第 09~13 行 是 商品 信息 功能 ， 
第 14~18 行 是 商品 展示 列表 ， 由 ul 和 若干 i 标签 组 成 。 


11.3.6 首页 XHTML 代码 总 览 


前 面 对 网 站 首页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 11.12 所 示 是 这 些 模块 组 
成 的 首页 XHTML 框架 图 ， 说 明了 层 的 炭 套 关系 。 


图 11.12 首页 XHTML 框架 
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在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <!IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 首页 的 
完整 XHTML 代 码 。 完 整 的 首页 XHTML 代 码 如 下 。 


代码 11-7 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
05 <title> 首 页 </title> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

09 < start orf ld-> 

10 <div id="hd" class="cf"> 

11 00 

12 </div> 

en of he-> 

14 <!--start of bd--> 

15 <div id="bd" class="index"> 


16 <div class="w1001 cf"> 

Lg <div class="newest fl"> 
18 oo 

下 号 </div> 

本 <div class="right fr"> 
2 wo 

22 </div> 

23 <div class="last cl"> 
24 Soa 

</div> 

26 <div class="will"> 

27 es 

28 </div> 

2 </div> 

30 </div> 


3 <1=-—end oFNbd==> 
32 sart or t= 
33 <div id="ft" class="whiteBg cf"> 


35 </div> 

20 <1—-and offt = 

37 </body> 

38 </html> 

第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 38 行 是 页 
的 一 对 html 标 签 ， 对 应 图 中 的 html{}。 第 08 行 和 第 37 行 是 页 面 的 一 对 body 标 签 ， 对 应 图 
中 的 body{}。 第 10~12 行 是 页 面 头 部 ， 对 应 图 中 的 机 d{}。 第 15~30 行 是 页 面 主体 内 容 ， 对 
应 图 中 的 #bd{}。 第 33~35 行 是 页 脚 ， 对 应 图 中 的 #ft{}。 第 17~19 行 是 最 新 特卖 ， 对 应 图 中 
-newest{}， 第 20~22 行 是 右 侧 信息 ， 对 应 图 中 的 .right{}， 第 23~25 行 是 最 后 疯 抢 ， 对 应 图 中 
. last{} ， 第 26~28 是 即将 推出 ， 对 应 图 中 的 .will{}。 


臣 臣 


11.3.7 内 页 XHTML 代码 总 览 


前 面 对 商 品 页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 11.13 所 示 是 这 些 模块 组 成 
的 商品 页 的 XHTML 框架 图 ， 说 明了 层 的 嵌 套 关系 。 
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图 11.13 商品 页 的 XHTML 框架 


在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 商品 页 
的 完整 XHTML 代码 。 完 整 的 商品 页 的 XHTML 代码 如 下 。 


代码 11-8 


01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 
05 <title> 商 品 页 </title> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 

08 <body> 

J <=—start or hd== 

10 <div id="hd" class="cf"> 

11 a 

12 </div> 

L393. <l=-enad orf hd 

la <I==start of bad==> 

15 <div id="bd" class="product"> 


16 <div class="w1020 cf"> 

玉 <div class="guide"> 

18 0 

19 </div> 

20 <div class="detail"> 

2 生 <div class="functions"> 
22 oo. 

23 </div> 

24 <ul class="productLists"> 
25 oo 

26 </ul> 

27 </div> 

28 </div> 

29 </div> 


30° <!1==end of bd==> 

3 < start of Tt -> 

32 <xdiv id="ft" class="whiteBg cf"> 
3 0 
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的 一 对 html 标 签 ， 对 应 图 中 的 html{}。 第 08 行 和 第 36 行 是 页 面 的 一 对 body 标 签 ， 对 应 图 
中 的 body{}。 第 10~12 行 是 页 面 头 部 ， 对 应 图 中 的 可 d{}。 第 15~29 行 是 页 面 主体 内 容 ， 对 
中 的 #bd{}。 第 32~34 行 是 页 脚 ， 对 应 图 中 的 #ft{}。 第 17~19 行 是 商品 banner， 对 应 图 中 


图 


34 
EL 
36 
37 
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</div> 
1 == DE EE== 
</body> 
</html> 


第 01 行 是 页 面 的 <IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 37 行 是 页 


-guide{}， 第 20~27 行 是 商品 分 类 信息 ， 对 应 图 中 的 .detail{}， 第 21~23 行 是 商品 信息 功能 ， 


Ry 


图 中 


的 .functions {}， 第 24~26 是 商品 展示 列表 ， 对 应 图 中 的 . productLists {}。 


11.4 CSS 编 写 


本 节 将 主要 讲解 产品 展示 网 站 的 CSS 编 写 ， 包 括 页 面 头 部 和 页 脚 、 首 页 和 内 页 的 CSS 编 写 。 


11.4.1 页 面 公共 部 分 的 CSS 编 写 


回 


页 


面 公 共 部 分 包括 CSS 重 置 、 页 面 中 的 公用 字体 、 字 体 颜色 的 样式 ， 以 及 页 面 头 部 和 页 脚 。 


页 面 头 部 和 页 脚 的 CSS 编 写 将 在 第 11.4.3 小 节 中 编写 。CSS 重 置 代 码 、 页 面 公用 样式 的 
CSS 代 码 编写 如 下 。 


代码 11-9 


01 
02 


03 
04 
05 
06 


07 
08 
09 
10 
11 
12 
jE 
14 
TS 
16 
I 


/*css reset*/ 
body,div,dl,dt,dd,ul,ol,1i,h]l,h2,h3,h4,h5,h6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 


/* 以 上 元 素 的 内 外 边 距 都 设置 为 0*/ 


*.cf{zoom:1;} /* IE 6/7 浏 览 器 (触发 hasLayout) */ 

/*global css*/ 
body{font-family:" 宋 体 ";font-size:12px;color:#333;line-height:20px; 
background:#FDFBFE; } 

a{color:#333;} 

a:hover{color:#F42D97; text-decoration:none; } 
.fsl4{font-size:14px;} 

.arial{font-family:Arial;} 

.hei{font-family:" 黑 体 ";} 

.yahei{font-family: "微软 雅 黑 ";} 

.pink{color:#F42D97;} 

.whiteBg{background:#FCFAFD;} 

.border{border:1lpx solid #E4E2E5;} 
.borderRight{border-right:1lpx solid #E9E1E8;} 
.borderWhite{border:1lpx solid #fff;border-bottom:0 none;} 
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18 .wl00l{width:100lpx;margin:0 auto7 
19 .wl020{width:1020px;margin:0 auto;} 
20 .mbl5{margin-bottom:15px;} 

21 .fl{ffloat:left;display:inline;} 

22 .fr{float:right;display:inline;} 

23 .cl{clear:both;} 

24 .overHidden{overflow:hidden;zoom:1;} 
25 .noBorderBom{border-bottom:0 none;} 


第 01~04 行 是 CSS 重 置 代码 ， 与 前 几 章 相同 。 第 05~25 行 是 公用 CSS 代 码 。 网 站 的 公用 CSS 
代码 是 将 网 页 制作 复 使 用 的 样式 提炼 总 结 出 来 的 ， 其 中 第 07~08 行 定义 了 网 站 链接 
的 公共 样式 ， 第 09 行 定义 了 14px 字 号 ， 第 10~12 行 定义 了 网 站 可 能 使 用 的 字体 ， 第 13 行 是 网 
站 用 到 的 玫 红 色 字体 ， 第 18~19 行 定义 了 容器 宽度 ， 第 21~22 行 定义 了 左右 浮动 的 样式 。 


11.4.2 页 面 框 架 的 CSS 编 写 


前 面 分 析 了 首页 的 布局 图 并 且 编 写 了 首页 框架 的 XHTML 代 码 ， 根 据 这 两 部 分 编写 页 面 
框架 的 CSS 代 码 如 下 。 


01 #ft{color:#999199;padding:0 0 35px;} 
02 .index{background:url("../images/indexBg.jpg" 
repeat-x left top #F6F7Fl;padding:0 0 10px;} 


第 01 行 是 页 脚 最 外 层 容器 的 样式 ， 第 02 行 是 首页 的 主体 内 容 的 最 外 层 容器 的 背景 图 及 样式 。 
前 面 分析 了 商品 页 的 布局 图 并 且 编写 了 商品 页 框架 的 XHTML 代码 ， 根 据 这 两 部 分 编写 
商品 页 框架 的 CSS 代 码 如 下 。 


01 #ft{color:#999199;padding:0 0 35px;} 
02 .product{background:#F4F2DB;padding:0 0 20px;} 


第 01 行 是 页 脚 最 外 层 容 器 的 样式 ， 与 首页 相同 。 第 02 行 是 商品 页 主体 内 容 的 最 外 层 容器 
的 背景 颜色 及 样式 。 


11.4.3 页 面 头 部 和 页 脚 的 CSS 编 写 


前 面 分 析 了 页 面 头 部 并 且 编 写 了 页 面 头 部 的 XHTML 代 码 ， 页 面 头 部 的 CSS 代 码 如 下 。 
代码 11-10 


01 #hd .ico{fbackground:url("../images/hd imgs.png") no-repeat;} 

02 #hd .topNav-l{background:url("../images/topNav-1.gif") 
repeat-x left top;height:4lpx;} 

03 #hd .topNav-1 ul{height:40px;line-height:40px;} 

04 #hd .topNav-1 ul lif{float:left;display:inline;} 

05 #hd .topNav-1 ul li a{display:block;height:100%;} 

06 #hd .topNav-l1 ul.left{border-left:lpx solid #DBD9DC;} 

07 #hd -topNav-1 ul.left li{width:99px;border-left:lpx solid #FEFEFE; 
border-right:lpx solid #DBD9DC;text-align:center;} 

08 #hd .topNav-1 ul.left li.current{background:#FDFBFE;height:41lpx;} 
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避 吕 


38 


39 


#hd .topNav-1 ul.left li.current a{color:#F42D97;} 

#hd -topNav-1 ul.left .mobilePhone{background-position:-285px -4px; 
text-align:left;} 

#hd .topNav-l1 ul.left .mobilePhone a{padding:0 0 0 35px;} 

#hd .topNav-l1 ul.left 1i a{display:block;width:98px; 
font-size:14px;font-weight:bold;} 

#hd -topNav-1 ul.right .telPhone{width:125px;background-position:-300px -54px;} 
#hd .topNav-l1 ul.right .telPhone a{padding:0 0 0 20px;} 

#hd -topNav-1 ul.right .contactUs{width:99px;background-position:-295px -105px;} 
#hd .topNav-l1 ul.right .contactUs a{padding:0 0 0 30px;} 

#hd .topNav-l1 ul.right .vipService{width:99px; 
background-position:-157px -4px;} 

#hd .topNav-l1 ul.right .vipService a{padding:0 0 0 25px;} 

#hd .topNav-l1 ul.right 1i a{border-left:0 none;} 

#hd hl{background:url("../images/logo.png") no-repeat left top; 
width:283px;height:53px;margin:28px 0 0;} 

#hd hl a{width:100%;height:100%;display:block;text-indent:-999em; 
overflow:hidden;} 

#hd .topNav-2{color:#D9D9D9;padding:3px 0;} 

#hd .topNav-2 .order{background-position:-2px -156px;padding:0 1l0px 0 0;} 
#hd .topNav-2 .fashion{background-position:-13px -156px;padding:0 10px 0 0;} 

#hd .topNav-2 .focus{background-position:-102px -155px;padding:0 10px 0 15px;} 
#hd .topNav-2 span{color:#333;} 

#hd .topNav-2 afmargin:0 2px;} 

#hd .shopping{background-position:-100px -102px;padding:0 0 0 40px; 
width:125px;height:33px;line-height:33px;color:#fff;margin:20px 0 0;} 
#hd .shopping strong{margin:0 0 0 33px;} 

#hd .topNav-3{background:url("../images/topNav-3.gif") repeat-x left top; 
margin:1l0px 0 0;} 

#hd .topNav-3 ul lif{float:left;display:inline;width:90px;height:32px; 
line-height:32px;text-align:center;} 

#hd .topNav-3 ul li a{display:block;width:100%;height:100%;color:#fff; 
font-family: "微软 雅 黑 "; font-size:14px;} 

#hd .topNav-3 ul li a:hover,#hd .topNav-3 ul li.current{background-color:#CD197A; 
width:88px;height:31lpx;line-height:31lpx;border:lpx solid #F43499; 
border-bottom:0 none;} 

#hd .topNav-3 ul li.current a:hover{border:0 none;} 

#hd .topNav-3 ul li.beauty,#hd .topNav-3 ul li.beauty a:hover{ 
background-image:url("../images/hd imgs.png"); 
background-position:45px -100px;} 

#hd .topNav-3 ul li.willOonLine,#hd .topNav-3 ul li.willOonLine a:hovert{ 
background-image:url("../images/hd imgs.png");background-position: 
-340px -152px;width:100px;} 

#hd .topNav-3 ul li.willOnLine a,#hd .topNav-3 ul li.willOnLine a: 
hover{padding:0 0 0 10px} 

#hd .topNav-3 ul li.class{float:right;background-position:56px -25px; 
background-color:#E42388;width:98px;height:31px; 
line-height:3lpx;border:lpx solid #F43499;border-bottom:0 none;} 

#hd .topNav-3 ul 1i.class a{font-family:" 宋 体 "; 
font-size:12px;color:#FFC8E7;} 
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40 #hd .topNav-3 ul li.class a:hover{background:url 
("../images/hd imgs.png") no-repeat 56px -25px #FDFBFE;width:98px; 
color:#333;border:0 none;} 


第 01 行 定义 了 一 个 名 为 .ico 的 类 ， 凡 用 到 这 个 类 的 容器 都 使 用 hd_imgs.png 上 的 图 片 作为 背 
景 。hd_imgs.png 是 几 个 小 图 片 合 并 后 的 一 张 图 片 ， 通 过 在 CSS 中 定义 背景 图 片 的 background- 
position 值 来 精确 定位 使 用 hd_imgs:png 上 的 哪个 图 片 。 第 02~19 行 是 页 面 头 部 中 导航 1 的 样式 ， 其 
中 第 02 行 定义 了 导航 1 的 背景 和 高 度 ， 第 03~05 行 是 导航 1 中 各 文字 链接 的 公共 样式 ， 第 06~12 行 
是 导航 1 左 侧 4 个 文字 链接 的 样式 ， 第 13~19 行 是 导航 1 右 侧 3 个 文字 链接 的 样式 。 

第 20~21 行 是 网 站 标志 的 样式 。 第 22~27 行 是 导航 2 的 样式 ， 其 中 第 23~25 行 分 别 通过 设 
置 background-position 的 值 精确 定位 了 导航 2 中 的 “我 的 订单 ”、“ 时 尚 会 ”和 “关注 ”的 图 
标 。 第 28~29 行 是 购物 袋 的 样式 。 第 30~40 行 是 导航 3 的 样式 ， 其 中 第 30 行 定义 了 导航 3 的 背 
景 ， 第 38 行 通过 float:right 使 “在 售 商品 分 类 ”向 右 浮动 ， 从 而 显示 在 导航 3 整体 的 右 侧 。 

前 面 分 析 了 页 脚 并 且 编写 了 页 脚 的 XHTML 代码 ， 页 脚 的 CSS 代 码 如 下 。 


代码 11-11 


01 #ft{color:#999199;padding:0 0 35px;} 

02 #ft .icofbackground:url("../images/ft_imgs.png") no-repeat;} 

03 #ft afcolor:#9991997 } 

04 #ft a:hover{color:#999199;text-decoration:underline;} 

05 #ft .moreBrand{background-position:360px -240px; 
background-color:#F3F1lF4;border:lpx solid #F0OEDFO0;height:38px; 
line-height:38px;font-size:14px;text-align:center;width:999px;margin:0 auto;} 

06 #ft .bomNav-l{overflow:hidden;padding:30px 0 20px 0;} 

07 #ft .bomNav-1 .security{background-position:-5px Spx;} 

08 #ft .bomNav-1 .shop{background-position:-5px -28px;} 

09 #ft .bomNav-1 .buy{background-position:-1l0px -55px;} 

10 #ft .bomNav-1 .send{background-position:-1l0px -86px;} 

11 #ft .bomNav-1 .service{background-position:-7px -1l16px;} 

12 #ft .bomNav-l1 .code{background-position:-6px -145px; 
padding:0 0 0 25px;} 

13 #ft .bomNav-1 .weChat{background-position:-10px -175px; 
padding:0 0 0 35px;} 

14 #ft .bomNav-1 dl{width:140px;height:150px;} 

15 #ft .bomNav-1 dt{color:#646464;padding:0 0 0 30px;height:30px; 
line-height:30px;} 

16 #ft .bomNav-1 dd{padding:0 0 0 25px;background:url 
("../images/ft_ imgs.png") no-repeat 2px -202px;} 

17 #ft .bomNav-1 dd.noIco{background:none;padding:0;text-align:center;} 

18 #ft .bomNav-1 dd img{display:block;overflow:hidden;margin:3px auto;} 

19 #ft .bomNav-2{background:#D7237E;height:33px; 
line-height:33px;color:#fff;text-align:center;} 

20 #ft .bomNav-2 a{color:#fff;margin:0 10px;} 

21 #ft .copyRight{text-align:center;line-height:18px; 
padding:10px 0 30px;} 

22 #ft .img afmargin:0 8px;} 


第 02 行 定义 了 一 个 名 为 .ico 的 类 ， 凡 用 到 这 个 类 的 容器 都 使 用 ft imgs.png 上 的 图 片 作为 背 
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景 。ft_imgs.png 是 几 个 小 图 片 合并 后 的 一 张 图 片 ， 通 过 在 CSS 中 定义 背景 图 片 的 background- 
position 值 来 精确 定位 使 用 fiimgs.png 上 的 哪个 图 片 。 第 05 行 是 页 脚 中 更 多 品牌 的 样式 ， 第 
06~18 行 是 页 脚 中 导航 1 的 样式 ， 第 19~20 行 是 页 脚 中 导航 2 的 样式 ， 第 21 行 是 版 权 的 样式 ， 第 
22 行 是 网 站 认证 的 样式 。 


11.4.4 首页 主体 内 容 的 CSS 编 写 
根据 对 首页 主体 内 容 的 分 析 和 首页 主体 内 容 的 XHTML 代码 ， 编 写 首页 主体 内 容 的 CSS 代 


码 如 下 。 


代码 11-12 


01 


02 
03 
04 
05 
06 


07 


08 


09 


10 


1 之 


13 


14 


15 


16 


17 


18 
19 


20 


pk 


外 


23 


.index h2{text-indent:-999em;overflow:hidden; 
background:url("../images/index title.png")no-repeat; 
height:35px;margin:10px 0;} 

.right{width:331lpx;} 

.right .ico{background:url("../images/right imgs.png") no-repeat;} 
.right .promisel00{background-position:200px -150px;} 

.right .tab{margin-bottom:13px;} 

.right .tab .tabHd{background:url("../images/tab.gif") 

repeat-x 0 0;height:29px;line-height:29px;overflow:hidden;} 

right .tab .tabHd li{float:left;width:108px;font-weight:bold; 
text-align:center;} 

.right .tab .tabHd li.current{background:#FCFAFC;position:relative; 
bottom: Opx;} 

.right .tab .tabHd li.cen{border-left:lpx solid #EDEBEE; 
border-right:lpx solid #EDEBEE;} 

.right .tab .tabContent{display:none;} 

.right .tab .show{display:block;} 

.right .tab .tabContent dl{color:#666465;border-bottom:lpx dotted #686669; 
margin:0 20px;padding:]l8px 15px 18px 70px;} 

.right .tab .tabContent .promise-l{background-position:0 10px; 
padding:80px 90px 20px 20px;} 

.right .tab .tabContent .promise-2{background-position:-350px 0;} 
.right .tab .tabContent .promise-3{background-position:-350px -100px;} 
.right .tab .tabContent .promise-4{background-position:-350px -200px; 
border-bottom:0 none;} 

-right .tab .tabContent dt{font-size:14px;font-weight:bold;padding:0 0 Spx 0;} 
.right .comment {margin-bottom:13px;} 

.right .comment .title{background-position:-400px -400px; 
font-size:16px;color:#4D4D4D; font-family:" 黑 体 ";height:30px; 
line-height:40px;padding:0 0 0 50px;} 

-right .comment .sinaTwitter{background-position:158px -187px;} 
.right .comment ul li{border-bottom:lpx dotted #666;padding:1l5px 0 18px 0; 
margin:0 20px;} 

-right .comment ul 1i img{width:60px;height:60px;border:1lpx solid #D4D3D5; 
padding:1lpx;float :left;} 

.right .comment ul li a{font-weight:bold;} 
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24 
2 
26 
27 


28 


29 


30 
31 
3 多 
EE 
34 


35 


36 
Eh 
38 
Ek 


40 


41 


42 
43 


44 
45 
46 
47 
48 


49 
50 
51 
52 
53 
54 
55 
56 
57 


58 
总 节 
60 
61 
62 


-right 
-right 
-right 
-right 


-Commen: 
.Commen 
.Commen 
-notice 


t ul li p{margin:0 0 0 75px;} 

t ul li p a{display:block;} 

t ul li.noBorderBom{border-bottom:0 none;} 
h4{text-align:center;padding:15px 0 12px; 


font-size:12px;} 


-right 


-notice 


-tabHd{width:300px;height:33px;padding:2px 0 0; 


margin:0 auto;line-height:18px;background:url("../images/notice.png") 
no-repeat 0 0;overflow:hidden;color:#fff;line-height:16px;} 


.right 


-notice 


-tabHd li{float:left;width:73px; 


border-left:1px solid #E581AD;border-right:1lpx solid #F4A6C8;text-align:center;} 


-right 
.right 
.right 
-right 
.right 


-notice 
-notice 
-notice 
-notice 
-notice 


.tabHd li.current{border-:0 none;} 
-tabContent{display:none;padding:10px;} 
.show{display:block;} 

-tabContent span{width:100px;height:50px;float:left;} 
.tabContent span img{display:block;width:98px; 


height:48px;margin:0 auto;} 

.right .notice .tabContent span a{ border:lpx solid #FCFAFD; 
display:block;width:98px;height:48px;} 
.brand{position:relative;} 

.brand a{display:block;border:lpx solid #E4E2E5;} 

.brand a:hover{color:#fff;border:lpx solid #dc5c95;} 

.brand a .summaryBg{background:#fff;opacity:0.7; 

filter:alpha (opacity=70) ;position:absolute;left:1px;} 

.brand a:hover .summaryBg{background:#dc5c95;opacity:1; 
filter:alpha (opacity=100);} 

brand a .summ 


lary{position:absolute; left:1lpx;z-index:2; 


line-height:22px;padding-left:10px;padding-right:10px;} 
:brand a .summ 


lary h3{font-weight:normal;font-size:12px;} 


.brand a .summary .introfbackground:url("../images/icoInfo.png") 
no-repeat right center; float:right;width:70px;text-align:left;} 
.newest{width:670px;} 


.newes 
.newes 
.newes 
.newes 

height 
.newes 
.newes 
-newes 


t h2{bac 
| 
tv 1 
1 
> 
1 
在 
eb 


kground-position:0 0;} 
width:642px;height:182px;margin-bottom:13px;} 
a{width:640px;height:180px;} 

a .summaryBg, .newest ul li a .summary{bottom:1px; 


a .summary{text-align:center;width:620px;} 
a .summaryBg{width:640px;} 
a .summary h3{float:left;width:200px;text-align:left;} 


.last{overflow:hidden;} 


.last 
.last 
-last 
-last 
-last 
height 
-last 
last 


h2 {backg. 
ul{width 
ul li{wi 
ul li af 
1 
2 
ul lia 
Bs i 


round-position:0 -50px;} 

:1032px;} 

dth:312px;height:232px;margin:0 32px 0 0;} 
width:310px;height:230px;} 

.summaryBg, .last ul li a .summary{bottom:1px; 


.summary{width:290px;} 
.summaryBg{width:310px;} 


.will{overflow:hidden;} 
-will h2{background-position:0 -100px;?} 
-will ul{width:1032px;} 
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63 
64 
65 
66 
67 


-will 
-will 
-will 
-will 
-will 


ul li{width:312px;height:232px;margin:0 32px 0 0;} 

ul li a{width:310px;height:230px;} 

ul li a .summaryBg, -will ul li a .summary{bottom:1lpx;height:72px;} 
ul li a .summary{width:290px;} 

ul li a .summaryBg{width:310px;} 


第 01 行 是 首页 所 有 h2 标 题 的 样式 ， 标 题 “ 最 新 特卖 ”、“ 最 后 疯 抢 ”、“ 即 将 推出 ”和 


“100% 1 


E 品 保证 ”都 应 用 了 该 样式 。 第 02 行 是 右 侧 最 外 层 容器 的 样式 ， 定 义 了 宽度 。 第 03 


行 定义 了 一 个 名 为 .ico 的 类 ， 凡 用 到 这 个 类 的 容器 都 使 用 right_imgs.png 上 的 图 片 作为 背景 。 
right_imgs.png 是 几 个 小 图 片 合并 后 的 一 张 图 片 ， 通 过 在 CSS 中 定义 背景 图 片 的 background- 
position 值 来 精确 定位 使 用 right_imgs.png 上 的 哪个 图 片 。 

第 05~17 行 是 右 侧 “服务 承诺 ”、“ 上 市 公司 ”和 “365 基 金 ”组 成 的 Tab 切 换 效果 的 样 


式 ， 其 


h 第 10 行 通过 display:none 将 Tab 内 容 区 全 部 设置 为 不 可 见 ， 再 通过 第 11 行 .show 中 的 


display:block 将 当前 内 容 设 置 为 可 见 。 第 18~26 行 是 右 侧 用 户 评价 的 样式 。 第 27~35 行 是 右 侧 新 
品牌 开 售 的 样式 。 

第 36~43 行 是 最 新 特卖 、 最 后 疯 抢 和 即将 推出 这 3 大 版 块 中 的 图 文 列表 的 公共 样式 。 将 这 
3 大 版 块 中 相似 的 部 分 提炼 出 来 ， 总 结 出 公共 样式 ， 以 供 每 个 模块 使 用 ， 不 但 能 够 精简 CSS 代 
码 、 提 高 网 站 速度 ， 而 且 可 以 使 页 面相 似 的 模块 展现 效果 统一 。 第 44~51 行 是 最 新 特卖 的 样 
式 ， 第 52~59 行 是 最 后 疯 抢 的 样式 ， 第 60~67 行 是 即将 推出 的 样式 。 


11.4.5 内 页 主体 内 容 的 CSS 编 写 


根据 对 内 页 主体 内 容 的 分 析 和 内 页 XHTML 代 码 ， 编 写 内 页 主体 内 容 的 CSS 代 码 如 下 。 
代码 11-13 


01 


02 
03 
04 
05 
06 


07 


08 


09 


10 


jE 


2 


13 
14 


.guide{background:url("../temp/productl1.jpg") no-repeat left top; 
width:1020px;height:568px;position:relative;} 

.guide a{position:absolute;display:block;} 

.guide .guidePic-1l{width:400px;height:270px;top:20px;left:80px;} 
.guide .guidePic-2{width:450px;height:280px;top:90px;left:500px;} 
-guide .guidePic-3{width:390px;height:230px;top:330px;left:120px;} 
.detail .functions{height:65px;padding:15px 10px 22px; 
background:#FBFAF8;} 

.detail .functions a:hover{text-decoration:none;} 

.detail .functions .class{font-family:" 微 软 雅 黑 ";padding:0 0 25px;} 
.detail .functions .class span{font-size:14px; 
font-weight:bold;color:#666463;} 

.detail .functions .class a{margin:0 1l0px;padding:2px Spx; 
border:lpx solid #FDFBFE;} 

.detail .functions .class a:hover,.detail .functions 

.class a.selected{border:lpx solid #F43499;color:#F43499; 
padding:2px 5S5px;} 

.detail .functions .btn{background:url("../images/productBtn.png") 
no-repeat left top;width:235px;height:30px;line-height:30px;} 
.detail .functions .btn .yes{margin:0 13px;} 

-detail .functions .btn .discount{margin:0 20px;} 
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15 
16 


了 


18 
I 
20 


21 
22 
23 
24 
25 
26 
必 汪 


.detail .functions .btn .price{margin:0 13px;} 


.detail .functions .page{width:765px;text-align:right; 

font-family: "微软 雅 黑 ";} 

.detail .functions .page a{font-size:14px;margin:0 0 0 2px; 

border:1lpx solid #E6E4E7;padding:6px 10px 5px;font-family:" 宋 体 ";} 

-detail .functions .page span{margin:0 S5px 0 0;} 

-productLists{background:#EDEDED; overflow:hidden;padding:10px 0;} 
-productLists li{width:235px;height:388px;float:left; 

margin:0 lO0px;display:inline;} 


.productLists 
.productLists 
.productLists 
.productLists 
.productLists 
.productLists 
.productLists 


计生 
证 下 
1i 
J 
ED 
了 
2 


img{display:block;overflow:hidden;margin:0 auto Spx;} 
p ar .productLists li p span{display:block;} 
p{color:#818181;} 

p strong .productLists li p em{color:#F43499;} 

p span{font-family:arial;padding:8px 0 0;} 

p strong{font-size:16px;} 

p em{margin:0 Spx;} 


第 01~05 行 是 商品 banner 的 样式 ， 其 中 第 01 行 设置 了 商品 banner 的 背景 图 、 宽 度 和 高 度 ， 
并 通过 position:relative 将 容器 设置 为 相对 定位 。 第 02 行 设置 了 商品 banner 中 所 有 a 标签 的 样 
式 ， 通 过 position:absolute 将 所 有 a 标签 设置 为 绝对 定位 ， 并 通过 display:block 将 a 标签 由 内 联 元 
素 转 变 为 块 元 素 。 第 03~05 行 通过 给 left 和 top 属 性 设置 值 分 别 将 3 个 a 链接 精确 定位 到 相应 的 商 
品 上 ， 并 通过 给 width 和 height 属 性 设置 值 来 精确 定义 a 链接 的 尺寸 。 第 06~18 行 是 商品 分 类 信 
息 的 样式 。 

第 19~27 行 是 商品 展示 列表 的 样式 ， 其 中 第 21 行 通过 “display:block:;overflow:hidden:” 将 


图 片 下 面 的 空白 


去 掉 ， 但 与 此 同时 图 片 从 内 联 元 素 转变 成 了 块 元 素 ， 为 了 使 图 片 水 平 居中 显 


示 ， 又 设置 了 margin:0 auto 5px， 通 过 将 左右 外 间距 设置 为 auto， 使 图 片 水 平 居 中 。 


11.4.6 网 站 CSS 代 码 总 览 


前 面 讲解 了 页 面 头 部 、 页 脚 、 页 面 主体 内 容 、CSS 重 置 和 页 面 公 用 的 CSS 代 码 ， 这 些 代 
码 共同 组 成 了 网 站 页 面 的 完整 CSS 代 码 ， 如 代码 11-14 所 示 。 


代码 11-14 


01 
02 


@charset "utf- 
/*css reset*/ 


03 … 


04 


/*global css*/ 


05 ，… 


06 
07 
08 
09 
10 


/*module css*/ 
/*index.html*/ 
.index{…} 
.index h2{…} 
-right{…)} 


In 


12 
13 
14 


/*page.html*/ 
.product{**} 
.guide{""} 


本 
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15 sguide af 
16 ws 


沪 省 咯 的 代码 在 每 个 小 节 中 都 有 讲解 ， 这 里 不 再 图 述 。 


14.5 制作 中 需要 注意 的 问题 


11.5.1 CSS Sprites 技 术 的 利 与 次 


CSS Sprites 是 把 网 页 中 的 部 分 背景 图 片 和 小 图 标 等 整合 到 一 张 图 片 中 ， 再 利用 CSS 的 
“background-image” 、“background- repeat”、 wd 组 合 进行 背景 定位 ， 
background-position 可 以 用 数字 精确 地 定位 出 背景 图 片 的 位 置 。 
网 站 中 通过 利用 CSS Sprites 技 术 整 合 了 零碎 的 小 图 片 ， 从 而 减少 对 服务 器 的 请 求 数量 ， 
进而 加 快 页 面 加 载 速度 。 同 时 ，CSS Sprites 还 减少 了 图 片 的 字 节 ， 一 般 情况 下 ， 几 张 图 片 合 
并 成 一 张 图 片 的 字 节 总 是 小 于 这 几 张 图 片 的 字 节 总 和 ， 如 图 11.14 所 示 。 


5 次 2.08K 


对 服务 器 的 请 求 次 数 。。 图片 的 总 大 小 


服务 器 请 求 次 数 图 片 的 总 大 
1 次 1K 
oimgepre 


图 11.14 图 片 请 求 次 数 和 图 片 总 大 小 


诚然 ，CSS Sprites 是 如 此 的 强大 ， 但 是 也 存在 一 些 不 可 忽视 的 缺点 ， 例 如 : 


ee CSS Sprites 在 开发 的 时 候 比较 麻烦 ， 需 要 测量 计算 每 一 个 背景 单元 的 精确 位 置 ， 虽 然 
没什么 难度 ， 但 是 很 繁琐 。 

CSS Sprites 在 维护 的 时 候 比 较 麻烦 ， 如 果 页 面 背景 有 少许 改动 ， 一 般 就 要 修改 这 张 

合并 的 图 片 ， 无 需 修改 的 地 方 最 好 不 要 动 ， 如 果 在 原来 的 地 方 放 不 下 ， 就 只 能 (最 

好 ) 往 下 加 图 片 ， 这 样 图 片 的 字 节 就 增加 了 ， 还 是 需要 改动 CSS。 


因此 在 制作 前 最 好 先 权衡 一 下 利弊 ， 再 决定 是 不 是 应 用 CSS Sprites。 
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11.5.2 准确 提炼 网 站 中 的 公共 模块 


电子 商务 网 站 简称 电 商 网 站 ， 电 商 网 站 和 门户 网 站 有 一 个 共同 点 ， 即 内 容 多 ， 内 容 的 组 
织 方式 有 规律 可 循 ， 因 此 制作 前 先 对 网 页 做 整体 分 析 ， 将 网 站 中 相同 或 相似 模块 的 XHTML 
和 CSS 样 式 提炼 出 来 ， 作 为 公共 样式 重复 应 用 。 整 体 分 析 得 好 不 但 可 以 使 制作 网 站 的 效率 大 
大 提高 ， 而 且 能 使 页 面 的 CSS 样 式 组 织 更 有 条 理 ， 方 便 日 后 修改 和 维护 。 


例如 ， 当 当 网 页 面 比 较 长 ， 内 容 也 比较 复杂 ， 但 是 可 取 其 中 一 段 页 面 进行 分 析 ， 如 图 
11.15 所 示 是 当当 的 一 段 网 页 截 


; 3 i 二 国 nm 


漳 ~ 


a 
me 


图 11.15 当当 网 的 一 段 网 页 截图 


画 框 中 版 块 的 XHTML 和 CSS 都 可 以 提炼 出 来 作为 公共 的 XHTML 和 CSS 样 式 来 使 
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一 一 新 品 展示 网 站 


新 品 展示 网 站 是 一 个 对 客户 的 产品 进行 详细 展示 的 网 站 ， 包 括 规 
格 、 款 式 、 颜 色 等 所 有 产品 的 详细 信息 。 这 类 网 站 犹如 一 个 展厅 或 展 
位 ， 能 让 顾客 更 直观 地 了 解 网 站 上 所 展示 的 产品 ， 让 顾客 在 看 到 产品 的 
同时 对 产品 的 每 一 个 信息 都 有 一 定 的 了 解 。 

本 章 主 要 涉及 到 的 知识 点 如 下 。 


效果 图 分 析 : 将 页 面 拆 分 ， 对 每 个 模块 进行 分 析 。 

网 站 布局 规划 和 切 图 : 对 网 站 页 面 进行 布局 规划 和 切 图 ， 并 
导出 图 片 。 

XHTML 编 写 : XHTML 框架 搭建 ; 网 站 公共 模块 的 XHTML 编 
写 ; 各 页 面 主体 内 容 的 XHTML 编写 。 

CSS 编 写 : 网 站 公用 样式 的 编写 ; 网 站 公共 模块 的 CSS 编 写 ; 
网 站 框架 的 CSS 编 写 ; 各 页 面 主 体内 容 的 CSS 编 写 。 

制作 中 的 注意 事项 。 


本 章 将 主要 讲解 新 品 展示 网 站 的 DIV+CSS 页 面 制作 。 新 品 展示 网 站 的 主流 展示 方式 是 利用 平面 
图 片 和 文字 介绍 做 成 类 似 目录 的 方式 。 


12.1 页 面 效 果 图 分 析 


本 节 将 主要 对 网 站 效果 图 进行 分 析 ， 包 括 页 面 头 部 和 页 脚 分 析 、 首 页 主体 内 容 分 析 和 内 


页 主体 内 容 分 析 。 下 面 两 张 psd 格 式 的 UI 图 (如 图 12.1 和 图 12.2 所 示 ) 分别 是 新 品 展示 网 站 的 
首页 和 产品 信息 页 的 页 面 效果 。 
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图 点 击 放大 图 片 ”图 点 击 放大 图 片 ” 田 点 击 放大 图 片 


全 @@ 


图 点 击 放大 图 片 ”图 点 击 放大 图 片 ” 田 点 击 放大 图 片 
关于 我 们 ~ 

i 于 
1915 年 9 月 ,Max Lneman 在 敌国 柏林 的 市 中 


心 开设 了 第 一 家 以 "ETAM- 命 名 的 专营 长 向 福 
的 零售 店 。ETAM 品 牌 由 此 庆生 ， 


20 年 代 ， 在 毒素 列 烈 的 革命 江湖 中 ,ETAM 方 。。 辐 点 击 站 大 羡 片 ” 画 点 击 站 大 羡 片 本 所 击 让 大国 片 
兴 来 页 。1928 年 ，ETAM 在 巴 革 1 
Honors 生 376 号 开设 了 专卖 店 ， 并 梅 公司 的 局 
总 部 移 至 这 个 世界 上 的 车 各 的 时 装 之 帮 。 | 
网 


90 年代,，ETAM 发 展 势 加 破 竹 。ETAM 集 团 主 


要 入 入 这 负 店 模 式 格 店 铺 发 展 至 西 歇 中国。 有 加 点 击 夏 大 图 片 ” 因 点 击 让 大 图 片 田 点 击 放大 图 片 
以 及 印度 等 国家 。 
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图 12.1 首页 
服装 展示 
各 2003 夏季 服饰 
进 择 的 商品 商品 信息 


采用 忧 叶 长 绒 析 面料 制 成 。 钻 桃 加 工 带 示 适度 逢 意 
的 届 后 与 本 好 的 起 毛 感 。 面 料 高 级 、 效 工装 守 有 也 
色 评 他 的 休闲 衬 衫 。 采 用 领 尖 纽扣 款式 。 是 一 次 旺 
可 单 宇 ， 刘 可 请 意 拆 挂 宇 著 的 单 品 . 

【面料 组 成 】 棉 100% 

【洗涤 信息 】 机 澳 

产品 尺寸 

尺码 商品 尺寸 (ea) 后 局 衣 长 ”局 宽 身 宽 


a 
r a 
al 旭 上 
尺寸 光量 方法 说 明 

半 放 入 购物 车 产品 尺寸 全 部 都 是 手工 刊 量 ， 请 购买 时 他 细 对 比 。 
由 于 每 个 人 的 测量 方法 不 同和 量具 差异 ， 有 些许 误 
车 是 正常 现象 。 我 们 建议 悠 在 挑 园 商品 时 ,可 以 测 
量 一 下 平时 所 罕 在 服 的 尺寸 ,再 对 比 尺 寸 表 进行 参 
考 。 一 般 上 装 可 测量 欧 图 和 店 宽 ,下 芝 可 测 县 本 。。 国光 
围 和 彰 转 作为 参考 数 需 。 


习 点 击 下 面 图 片 看 其 他 颜色 : 


本 店 所 有 产品 图 片 均 为 100x 实 物 卸 报 ， 并 由 专业 设 


， 高 质量 棉 府 钢 。 尺寸: 5 -XXXL 。 计 师 根据 产品 校正 图 片 颐 色 。 但 由 于 光线 、 角 度 和 
， 直 领 ， 单 物 前 口 终 ， 回 角 下 捏 。 价 格 : -434.99 。。 显示 器 对 比 度 不 同 ， 会 有 些许 色差 存在 
+ 100% 株 。 可 以 尘 机 。 进口。 。 促销 价 : $19.99 

雪 号 : #92076 


Coyote © oilT Eran cns Aris tee <TRN | ps | 产品 | 宪 户 | 联系 我 们 


图 12.2 产品 信息 页 
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3 党 首 页 UI 图 和 XHTML 页 面 通常 表示 为 index.psd 和 index htnl， 除 首页 外 的 其 他 页 面 统称 为 内 页 。 


12.1.1 头 部 和 页 脚 分 析 


页 面 的 头 部 ， 如 图 12.3 所 示 ， 包 括 网 站 签名 和 标志 ， 分 别 对 应 图 中 的 OO。 
网 站 签名 是 文字 ， 标 志 是 一 张 图 片 。 整 个 头 部 的 背景 如 图 中 阴影 所 示 ， 头 部 高 度 小 于 标 


志 的 高 度 。 
服装 展示 CLOTHES 
过 2003 夏季 服饰 © a| 


图 12.3 页 面 头 部 


在 布局 上 ， 头 部 分 为 左右 两 栏 ， 左 栏 是 网 站 签名 ， 右 栏 是 标志 。 由 于 头 部 的 高 度 小 于 标 
志 的 高 度 ， 因 此 ， 标 志 采 用 相对 头 部 这 个 父 容器 的 绝对 定位 ， 这 样 标志 脱离 CSS 文 档 流 并 王 
于 页 面 头 部 之 上 ， 头 部 容器 的 高 度 不 会 受 标志 高 度 的 影响 。 

页 脚 ， 如 图 12.4 所 示 ， 包 括 版 权 和 底部 导航 两 部 分 ， 分 别 对 应 图 中 的 OO@。 


nhs es L) Fm | 5 | = | sm | un) 


图 12.4 页 脚 


版 权 是 一 段 文字 ， 底 部 导航 是 5 个 文字 链接 。 
在 布局 上 ， 版 权 和 底部 导航 分 别 位 于 页 脚 的 左右 两 栏 ， 版 权 向 左 浮动 ， 底 部 导航 可 以 不 
浮动 ， 正 常 文档 流 即 可 。 


12.1.2 首页 主体 内 容 分 析 


首页 的 主体 内 容 ， 如 图 12.5 所 示 ， 包 括 右 侧 导 航 、 公 司 信息 和 服装 展示 ， 分 别 对 应 图 中 
的 0@@。 

右 侧 导 航 ， 由 3 个 子 导航 组 成 ， 包 括 分 类 、 客 户 服务 和 我 的 信息 ， 分 别 对 应 图 中 的 
ABC， 这 3 个 子 导航 分 别 是 3 个 文字 链接 列表 。 每 个 文字 链接 列表 都 用 一 个 标题 总 结 了 这 部 分 
导航 的 主要 内 容 。 

公司 信息 ， 由 一 张 图 片 和 关于 我 们 组 成 ， 分 别 对 应 图 中 的 DE。 其 中 ， 关 于 我 们 由 一 个 标 
题 和 3 段 文字 组 成 。 

服装 展示 ， 由 男士 夏装 和 女士 夏装 组 成 ， 分 别 对 应 图 中 的 FG。 男 士 夏 装 由 标题 和 服装 列 
表 组 成 ， 女 士 夏装 与 男士 夏装 的 结构 和 样式 完全 相同 。 

首页 主体 内 容 从 布局 上 分 为 左右 两 栏 : 公司 信息 和 服装 展示 是 主要 内 容 区 ， 可 以 看 做 左 
栏 ， 正 常 文档 流 ， 右 侧 导 航 是 右 栏 ， 向 右 浮动 。 
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服装 展示 
六 2003 夏季 服饰 


图 占 击 旅 大 图 片 ” 国 点 击 放大 图 片 田 点 击 训 
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图 12.5 首页 的 主体 内 容 


12.1.3 内 页 主体 内 容 分 析 


产品 信息 页 的 主体 内 容 ， 如 图 12.6 所 示 ， 包 括 右 侧 导 航 、 商 品 简介 和 商品 信息 ， 分 别 对 
应 图 中 的 OO@。 


@ 右 侧 导航 与 首页 中 右 侧 导航 的 结构 和 样式 都 相同 。 

日 商品 简介 ， 包 括 商品 大 图 、“ 放 入 购物 车 ”按钮 、 商 品 颜色 和 商品 摘要 ， 分 别 对 应 图 中 的 
D、E、F、G。 其 中 ， 商 品 颜 色 是 3 张 图 片 组 成 的 图 片 列 表 ， 商 品 摘要 是 两 个 文字 列表 。 

e 商品 信息 ， 由 几 段 商品 的 详细 介绍 组 成 。 


内 页 主体 内 容 从 布局 上 分 为 左右 两 栏 :商品 简介 和 商品 信息 是 主要 内 容 区 ， 可 以 看 作 是 
左 栏 ， 正 常 文档 流 ; 右 侧 导航 是 右 栏 ， 向 右 浮动 。 
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服装 展示 CLOTHES 
器 2003 夏季 服饰 


沪 商品 信息 
采用 蕊 质 长 绒 棉 面料 制 成 。 钻 桃 加 工 带 来 适度 随意 
的 质感 与 精妙 的 起 毛 感 。 面 料 高 统 、 获 工 考究 且 配 
色 鲜 攀 的 休闲 衬衫 。 采 用 领 估 纽扣 款式 。 是 一 款 既 
可 单 宇 ， 亦 可 随意 披挂 字 着 的 单 品 。 
【面料 组成】 棉 100X 
【洗涤 信息 】 机 尘 
产品 尺 十 
尺码 商品 尺寸 (cm) 后 局 衣 长 ”局 宽 身 宽 
人 44 52 22.5 
TB 55 23,5 
75 58 25 
81 2 26 


尺寸 式 县 方法 说 明 

产品 尺寸 全 部 都 是 手工 测量 ， 请 购买 时 仔细 对 比 。 
由 于 每 个 人 的 测量 方法 不 同和 量具 差异 ， 有 些许 误 
差 是 正常 现象 。 我 们 建议 您 在 挑选 商品 时 ， 可 以 测 
量 一 下 平时 所 穿 衣服 的 尺寸 ， 再 对 比 尺 寸 表 进行 参 
考 。 一 般 上 装 可 测量 胸围 和 肩 宽 ， 下 装 可 测量 腰 
围 和 余力 作为 参考 数据 。 


本 店 所 有 产品 图 片 均 为 100% 实 物 拍摄 ， 并 由 专业 设 
计 师 根据 产品 校正 图 片 颜色 。 但 由 于 光线 、 角 度 和 
显示 器 对 比 度 不 同 ， 会 有 些许 色差 存在 。 


图 12.6 产品 信息 页 的 主体 内 容 


12.2 布局 规划 及 切 图 


本 节 将 主要 介绍 新 品 展示 网 站 的 页 面 布局 规划 、 页 面 图 片 切割 并 导出 图 片 。 这 些 工作 是 
制作 本 章 案 例 前 的 必要 步骤 。 


12.2.1 页 面 布局 规划 


根据 前 面 对 网 站 效果 图 的 分 析 ， 为 了 后 面 写 出 清晰 简洁 的 XHTML 代码 ， 对 页 面 的 整体 
结构 进行 了 提炼 ， 得 到 了 页 面 的 大 致 布局 图 ， 如 图 12.7 所 示 。 


人 DIV+CSSrmskxzmiatd .= .). ..,,. 。 


图 12.7 页 面 布局 


12.2.2 切割 首页 及 导出 图 片 


首页 需要 切割 的 图 片 包括 网 站 整体 背景 图 : bg.gif、 网 站 标志 logo.gif、 右 侧 导 航标 题 背 
景 图 m_03.gif、“ 关 于 我 们 ”模版 的 背景 图 index_54.gif、 服 装 展示 列表 标题 部 分 的 背景 图 片 
index_57.gif、 服 装 展示 列表 每 件 服装 的 背景 图 片 om_bg.gif、 网 站 使 用 的 图 片 11.jpg、om_15. 
gif, om 16.gif、om 17.gif、om_ 26.gif、 om 27.gif、 om 28.gif、om 47.gif、 om 48.gif、 
om 49.gif、om 59.gif、om 60.gif、om 61.gif、 小 图 标 sign.gif、arrow.gif、zoom.gif， 如 图 
12.8 所 示 是 首页 在 Photoshop 中 的 所 有 切片 。 


sign.gif 


呈 男士 


午时 


图 点 击 放大 图 片 ” 田 点 击 放大 图 片 图 


PE index 54,jpg 


1915 年 9 月 ,Max Linemaff 芷 请 国 析 


必 开 设 了 第 一 家 以 "ETAM" 命 名 的 者 营 长 巩 袜 站 2 四 
的 零售 店 。ETAM 品 牌 由 此 诞生。 om. if om. gif .gif 


20 年 代 ， 在 秦 豆 列 烈 的 草 命 浪 测 中 ,ETAM 方 。 | 国 点 击 放大 图 片 ” 团 点击 放大 图 片 田 点 击 放大 图 片 
1928 年 ,ETAM 在 巴黎 的 : 


i ol Sh 
80 年 代 ，ETAM 发 展 势 如 矶 作 。ETAM 集 团 主 Ep 


要 依 灶 演 负 店 模式 格 店铺 发 展 至 西欧 ,中国 。 呈 襄 击 访 大 图 和 加 点 击 让 大 图 片 田 点 击 放大 图 上 
以 及 印度 等 国家 。 和 
om_bg.gif 
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图 12.8 首页 在 Photoshop 中 的 所 有 切片 
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12.2.3 切割 内 页 及 导出 图 片 


产品 信息 页 的 头 部 、 右 侧 导 航 与 首页 相同 ， 所 以 这 几 部 分 的 图 片 就 不 需要 重复 切割 了 ， 
只 需要 主体 内 容 区 的 图 片 即 可 ， 包 括 商品 大 图 sp2.gif、 商 品 大 图 背景 图 片 sp1.g8if、“ 放 入 购物 
车 ”小 图 标 product 07.gif、 商 品 小 图 sp12.gif、sps.gif、sp6.gif、 商 品 小 图 背景 图 片 product 13. 
gif、 商 品 信息 背景 图 片 product 05.gif， 如 图 12.9 所 示 是 产品 信息 页 在 Photoshop 中 的 所 有 切片 。 


服装 展示 了 
52003 夏季 服饰 sp .gif 


product_05.gif 


尺码 商品 尺寸 (cn) 后 启 衣 长 ”局 
s 4 4 


尺寸 区 量 方法 说 明 

产品 尺寸 全 部 都 是 手工 向 量 ， 请 购买 
由 于 每 个 人 的 测量 方法 不 同和 量具 天 
著 是 正常 现象 。 我 们 建议 你 在 执 选 商 上 
量 一 下 平时 所 罕 衣 服 的 尺寸 ， 再 对 比 尺寸 


考 。 一 般 上 装 可 测量 胸围 和 肩 宽 ， 下 装 可 测量 狠 


LS 
访问 我 保存 的 信息 
图 和 风力 作为 参考 数据 。 


， 而 质量 棉 府 桨 。 尺 二 5- XXXL 

* 直 坑 ， 单 胸 前 口 槛 ， 轿 角 下 皖 。 价 格 : -$4.99 

， 100y 株 。 可 以 洗 机 。 进口 。 。 促销 价 : $19.99 
和 歌 号 : 92076 
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图 12.9 产品 信息 页 在 Photoshop 中 的 所 有 切片 


12.3 XHTML 编写 


本 节 将 详细 讲解 页 面 头 部 和 页 脚 、 页 面 公共 部 分 、 页 面 框架 和 每 个 页 面 的 XHTML 代码 
的 编写 。 语 义 和 结 构 良 好 的 XHTML 代码 不 仅 在 制作 网 站 时 省 时 省 力 ， 更 有 利于 提高 网 站 排 
名 ， 因 此 XHTML 的 编写 虽然 简单 ， 但 很 重要 。 


12.3.1 页 面 的 XHTML 框架 搭建 


网 站 的 所 有 页 面 均 使 用 相同 的 XHTML 框架 ， 这 个 框架 利用 一 个 id 为 doc 的 div 标 签 包含 所 
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有 XHTML 代码 ， 里 面 再 分 为 4 部 分 : 右 侧 导航 、 头 部 、 主 体内 容 和 页 脚 ，id 分 别 为 rightNav、 
hd、bd 和 ft。 页 面 的 XHTML 框 架 编写 如 下 。 


代码 12-1 

01 <xdiv id="doc"> 

02 <!--start of rightNav-——> 

03 <div id="rightNav"></div> 

04 <!--end of rightNavV 一 -> 

05 本 4 本 本 

06 <div id="hd" class="cf"></div> 
07 < 一 GDd of hd=—> 

08 latart of bd==> 

09 <div id="bd" class="cf"></div> 
10 <L-—end of bd=-=> 

hE > 

12 <div id="ft" class="cf"></div> 
3 l=-=end of Tt 

14 </div> 


第 01 和 第 14 行 是 页 面 最 外 层 容器 #doc， 第 03 行 是 右 侧 导 航 ， 第 06 行 是 页 面 头 部 ， 第 09 行 
是 页 面 主体 内 容 ， 第 12 行 是 页 脚 。 其 他 行 的 代码 是 注释 。 


12.3.2 页 面 头 部 和 页 脚 的 XHTML 编写 


页 面 头 部 包括 网 站 签名 和 标志 : 网 站 签名 是 2 段 文字 ， 标 志 是 一 张 图 片 。 
页 面 头 部 的 XHTML 代 码 编写 如 下 。 


代码 12-2 


01 <hl><a href="#">clothes</a></h1l> 
02 <p class="hei"> 服 装 展示 </p> 
03 <p class="sign hei"><span class="arial">2003</span> 夏 季 服 饰 </p> 


第 01 行 代码 是 标志 ， 因 为 标志 是 网 站 最 重要 的 组 成 部 分 ， 因 此 在 XHTML 代 码 中 放 到 签 
名 的 前 面 。 第 02~03 行 是 网 站 签名 。 
页 脚 包括 版 权 和 底部 导航 : 版 权 是 一 段 文字 ， 底 部 导航 是 5 个 文字 链接 ， 其 中 每 个 链接 
竖 线 分 隔 。 页 脚 的 XHTML 代 码 编写 如 下 、 


代码 12-3 


01 <div class="copyRight arial">Copyright © 2011 Etam China. All Rights 
Reserved</div> 

02 <div class="bomNav"><a href="#" target=" blank"> 关 于 我 们 </a>|<a href="#" 
target=" blank"> 服 务 </a>1<a href="#" target=" blank"> 产 品 
</a>1<a href="#" target=" blank"> 客 户 </a>1<a href="#" target=" blank"> 


联系 我 们 </a></div> 
第 01 行 代码 是 版 权 ， 第 02 行 是 底部 导航 。 
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12.3.3 页 面 公共 部 分 的 XHTML 编写 


页 面 的 公共 部 分 除了 页 面 头 部 和 页 脚 外 ， 还 包括 右 侧 导航 ， 如 图 12.10 所 示 ， 深 色 区 域 是 
各 页 面 的 公共 部 分 。 


二 更 士 囊 一 
轴 本 二 大 丽 片 ” 加 二 击 认 大 辣 片 ”国王 和 全 上 


全 全 多 


固 点 十 放大 图 片 、 回 完 击 旗 大 图 片 、 田 高 击 汗 大 加 片 
Bsa i a 
1915 年 9 月 ,Max Lnsmar 在 管 加 个 林 的 下 中 

心 开 设 了 第 一 家 以 "ETAM" 命 名 的 寺 营 长 阐 裤 

的 零 售 下 。ETAM 忆 二 中 此 沽 生 。 


20 年 二。 在 天 刘 弄 弄 江油 和 中 ，ETAM 方 。 | 大 上 十 的 大 图 片 加 过 请 大国 片 本 后 机 大 国 片 
坟 素 ，1928 年 ,ETAME 巴 了 Sapnt 


Honorg 计 275 叶 开设 了 志 要 让 ,并 和 从 二 的 FP 
ee 总 
0 生化 ，ETAH 估 屈 于 扣 证 性 -ETAN 集 团 主 EE 


下 注 东 洲 后 本 区 标语 夺 宏 属 友 贡院 ， 中国。 有 加 点 硬座 大 图 片 回避 "es 本 
po 机 放大 图 片 回 点击 让 大 图 片 田 点击 站 大 图 上 


内 选择 的 商品 3 商品 信息 
条 用 优 寺 长生 境 而 利和 Mt。 四 模 加 工 带 东 汪 | 
的 古 丰 后 各 由 驮 于 志 是 。 仙 村 训 颖 、 邵 工 才 完 有 了 


色 时 他 区 休 半 半 笠 。 采 避 健 人 钙 和 区 式 。 是 一 协 本 
可 里 弃 ， 诅 可 月 售 扫 入 罕 荐 的 单 品 。 

【 画 村 成 】 六 1004 

【这 深信 息 ]】 轴 和 

产品 尺寸 

尺码 次 品 尺寸 (ea) 后 忆 友 长 店 查 身 寓 

s ™ 4 5 
a mn 55 5 35 
上 mm 4 m5 

a a 3 es 


尺 才 坟 旺 方法 党 明 

天 帮 入 购物 车 -产品 尺寸 全 部 等 是 手工 测量 ， 江 购买 时 全 细 对 比 。 

让 点 击 下 面 图 片 看 其 他 双色 : 电 于 每 个 人 的 负 量 方法 下 同 包 晶 具 任 异 , 有 些许 误 
和 是 正 现 全， 长 们 于 认 代 下 捉 选 商 8 ， 可 以 测 


是 一 下 平时 所 全 去 服 的 尺 七 ， 再 对 比 尺 寺 寺 进 行 估 
考 。 一 般 上 装 可 借 生 向 轩 和 局 锡 ， 下 装 可 全 县 大 
图 和 种 委 作为 参考 改天 


机 后世 有 有 严 品 胃 片 均 为 100x 安 移 按 问 ， 划 自 寺 业 刘 
本 要 要 产品 这 正 图 上 独 色 。 和 由于 光 些 、 争 医 和 


“高 质 县 神 罕 调 、 RH: -wo 
“ 直 罚 ， 音 攀 前 口 余 。 回 和 下 提 ， 
“00 机, 可以 族 机 . 进 吕 。 


图 12.10 网 站 所 有 页 面 的 公共 部 分 
右 侧 导航 的 XHTML 代码 编写 如 下 。 
代码 12-4 


01 <h2> 分 类 </h2> 
02 <ul> 
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分 


03 
04 
05 
06 
07 
08 
09 
10 
i 
12 
L3 
14 
15 
16 
3 
18 
13 
20 
2 
22 
23 
24 
25 
26 
之 坟 
28 


2 


target=" blank"> 男 士 </a></1i> 
target=" blank"> 女 士 </a></1i> 
target="” blank"> 孕 妇 </a></1i> 
target=" blank"> 大 码 </a></1i> 
target=" blank"> 男 孩 </a></1i> 
target="” blank"> 女 孩 </a></1i> 
target=" blank"> 男 婴 </a></1i> 


<li class="noline"><a href="#"” target=" blank"> 女 婴 </a></1i> 


target=" blank"> 商 铺 分 布 </a></1i> 
target=" blank"> 采 购 退货 </a></1i> 
target="” blank"> 联 系 我 们 </a></1i> 
target="” blank"> 购 物 </a></1i> 
target=" blank"> 信 用 卡 信息 </a></1i> 
target="” blank"> 关 于 我 们 </a></1i> 
target="” blank"> 我 的 信息 </a></1i> 
target=" blank"> 安 全 与 隐私 </a></1i> 


<li class="noline"><a href="#"” target=" blank"> 技 术 问 题 </a></1i> 


<li><a href="#"” target=" blank"> 订 单 状 态 跟踪 </a></1i> 
<1i><a href="#"” target=" blank"> 购 物 袋 </a></1i> 
<1i class="noline"><a href="#" target=" blank"> 访 问 我 保存 的 信息 


<1i><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 

</ul> 

<h2> 客 户 服务 </h2> 

<ul> 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 
<li><a href="#" 

</ul> 

<h2> 我 的 信息 </h2> 

<ul> 
</a></1i> 

</ul> 


第 01~11 行 、 第 12~23 行 和 第 24~29 行 分 别 对 应 3 个 子 导航 。 这 3 个 子 导航 结构 和 样式 都 相 
同 。 每 个 子 导航 都 是 一 个 文字 链接 列表 ， 用 ul 列表 显示 内 容 。 


12.3.4 首页 主体 内 容 的 XHTML 编写 


首页 的 主体 内 容 包 括 右 侧 导 航 、 公 司 信息 和 服装 展示 : 右 侧 导 航 是 网 站 所 有 页 面 的 公共 
部 分 ， 在 前 面 已 经 编写 了 这 部 分 的 XHTML 代码 ， 这 里 不 再 发 述 。 公 司 信息 和 服装 展示 这 2 部 


属于 #bd 中 的 内 容 ， 分 别 对 应 的 div 的 class 名 是 .left-column 和 .right-column。 首 页 主体 内 容 中 


的 公司 信息 和 服装 展示 的 XHTML 代 码 编写 如 下 。 
代码 12-5 


01 <xdiv class="left-column"> 

<img src="images/11.jpg" /> 

<div class="us"> 

<h3 class="sign"> 关 于 我 们 </h3> 


02 
03 
04 
05 
06 
07 
08 
09 


</div> 
</div> 


<p>1915 年 * 


… 诞 生 。</p><p>20 年 代 … 之 都 。</p><p>80 年 代 … 国 家 。</p> 


<div class="right-column"> 


<div class="]list"> 
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10 <div class="hd sign cf"> 

En <span class="more"><a href="#"> 更 多 </a></span> 

12 <h4> 男 士 </h4> 

pie </div> 

14 <ul> 

i 生计 

16 <a href="#"><img src="images/om 15.gif"/></a> 
17 <p><a href="#"> 点 击 放大 图 片 </a></p> 

18 </11> 

19 2 

20 E> 

2 <a href="#"><img src="images/om 28.gif"/></a> 
22 <p><a href="#"> 点 击 放 大 图 片 </a></p> 

2 </1i> 

24 </ul> 

25 </div> 

26 <div class="list"> 

27 <div class="hd sign cf"> 

28 <span class="more"><a href="#"> 更 多 </a></span> 

29 <h4> 女 士 </h4> 

30 </div> 

hs <ul> 

32 <1i> 

3 <a href="#"><img src="images/om 47.gif"/></a> 
34 <p><a href="#"> 点 击 放大 图 片 </a></p> 

35 </1li> 

36 9 

38 二 

38 <a href="#"><img src="images/om 61.gif"/></a> 
39 <p><a href="#"> 点 击 放大 图 片 </a></p> 

40 </1Ii> 

41 </ul> 

42 </div> 

43 </div> 


第 01~07 行 是 公司 信息 。 第 08~43 行 是 服装 展示 ， 其 中 第 02 行 是 公司 信息 项 部 的 大 图 片 ， 
第 03~06 行 是 公司 信息 中 的 “关于 我 们 ”， 第 04 行 是 “关于 我 们 ”的 标题 ， 第 05 行 是 “关于 
我 们 ”中 的 3 个 段落 ， 分 别 用 了 3 个 p 标 签 来 包含 3 文字 。 第 09~25 行 和 第 26~42 行 是 服装 展示 中 
的 2 个 服装 展示 区 ， 第 09~25 行 是 男士 夏装 展示 区 ， 第 26~42 行 是 女士 夏装 展示 区 。 这 两 个 服 
装 展示 区 域 的 结构 ， 都 是 由 一 个 标题 、“ 更 多 ”链接 和 服装 列表 组 成 。 其 中 以 男士 夏装 展示 
区 为 例 ， 第 11 行 是 “更 多 ”链接 ， 第 12 行 是 标题 ， 第 14~24 行 是 服装 列表 ， 由 标签 包含 几 个 
1 标签 组 成 。 


12.3.5 内 页 主体 内 容 的 XHTML 编写 
产品 信息 页 的 主体 内 容 包括 右 侧 导航 、 商 品 简介 和 商品 信息 : 右 侧 导 航 是 网 站 所 有 页 面 


的 公共 部 分 ， 在 前 面 已 经 编写 了 这 部 分 的 XHTML 代 码 ， 这 里 不 再 费 述 ; 商品 简介 和 商品 信 
息 这 2 部 分 属于 #bd 中 的 内 容 ， 分 别 对 应 的 DIV 的 class 名 是 .left-column 和 .right-column。 产 品 信 
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息 页 主体 内 容 中 的 商品 简介 和 商品 信息 的 XHTML 代码 编写 如 下 。 


代码 12-6 

01 <xdiv class="left-column"> 

02 <div class="big-pic"> 

03 <h3 class="sign"> 选 择 的 商品 </h3> 

04 <img src="images/sp2.gif" /> 

05 </div> 

06 <div class="buy"><a href="#"> 放 入 购物 车 </a></div> 

07 <div class="small-pic"> 

08 <h3 class="sign"> 点 击 下 面 图 片 看 其 他 颜色 </h3> 

09 <ul> 

10 <li><a href="#"><img src="images/spl2.gif" /></a></1i> 

LT <li><a href="#"><img src="images/sp5.gif" /></a></1Li> 

12 <li><a href="#"><img src="images/sp5.gif" /></a></1i> 

TS </ul> 

14 </div> 

15 <div class="info cf"> 

16 <dl class="info-list-left"> 

Ue <dd>。 高 质量 棉 府 网。</dd> 

18 <dd>。 直 领 ， 单 胸 前 口袋 ， 圆 角 下 摆 。</dd> 

19 <dd>。 100% 棉 。 可 以 洗 机 。 进 口 。</aq> 

20 </dl> 

ht <dl class="info-list-right arial"> 

22 <dd> 尺 寸 :<strong>S - XXXL</strong></dd> 

之 3 <dd> 价 格 ， <span class="red linethrough">$34.00 
</span></dd> 

24 <dd> 促 销 价 : <span class="red">$19.99</span></dd> 

25 <qd> 款 号 : #192076</dd> 

26 </dl> 

27 </div> 

28 </div> 

29 <xdiv class="right-column"> 

30 <div class="detail"> 

hE <h3 class="sign"> 商 品 信 息 </h3> 

32 <p> 采 用 优质 … 亦 可 随意 披挂 穿着 的 单 品 。<br/>… 会 有 些许 色差 存在 。</p> 

33 </div> 

34 </div> 


第 01~28 行 是 商品 简介 。 第 29~34 行 是 商品 信息 。 其 中 第 02~05 行 是 商品 大 图 ， 包 括 第 03 
行 的 标题 和 第 04 行 的 图 片 。 第 06 行 是 “ 放 入 购物 车 ”按钮 ， 这 个 按钮 是 一 个 链接 。 第 07~14 
行 是 商品 颜色 ， 由 第 08 行 的 标题 和 第 09~13 行 的 颜色 信息 ul 列表 组 成 。 第 15~27 行 是 商品 摘 
要 ， 由 两 个 结构 相同 的 dl 列表 组 成 。 第 31 行 是 商品 信息 的 标题 ， 第 32 行 是 商品 的 详细 介绍 。 


12.3.6 首页 XHTML 代码 总 览 


前 面 对 网 站 首页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 12.11 所 示 是 这 些 模块 组 
成 的 首页 XHTML 框 架 图 ， 说 明了 层 的 说 套 关系 。 
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出 


12.11 首页 XHTML 框架 


0 页 面 的 <!DOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 首页 的 


在 这 些 XHTML 代 码 的 基础 上 增 力 
完整 XHTML 代码 。 完 整 的 首页 XHTML 代码 如 下 。 
代码 12-7 
01 <!DOCTYPE HTML> 
02 <html> 
03 <head> 
04 <meta charset="utf-8"> 
05 <title> 首 页 </title> 
06 <link href="css/style.css" rel="stylesheet" type="text/css" /> 
07 </head> 
08 <body> 
09 <xdiv id="doc"> 
10 <!--start of rightNav--> 
11 <xdiv id="rightNav"> 
12 Fe 
13 </div> 
14 <!--end of rightNav--> 
15 < Start DE Dd > 
16 <div id="hd" class="cf"> 
1 了 oo. 
18 </div> 
L9 el==end oF hd=r> 
20 <==start of bd-=> 
21 <div id="bd" class="cf"> 
E24 <div class="left-column"> 
2 <img src="images/11.jpg" /> 
24 <div class="us"> 
25 oo 
26 </div> 
a </div> 
28 <div class="right-column"> 
2 <div class="list"> 
30 oo 
31 </div> 
Ej <div class="list"> 
本 本 oo 
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34 </div> 
35 </div> 
36 </div> 


37 <l==Snd vr bad=s> 
30, < ==5taEt OE t==> 
39 <div id="ft" class="cf"> 


41 </div> 

42 <1l=-=2nd oF ft==> 

43 </div> 

44 </body> 

45 </html> 

斑 网 页 的 编码 格式 一 般 有 两 种 :UTF-8 和 GBK。UTF-8 是 国际 编码 ， 通 用 性 强 。 本 书 所 有 网 站 均 
3 ”使 用 UTF-8 编 码 格 式 。 


第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 45 行 是 页 面 
的 html 标 签 ， 对 应 图 中 的 html{}。 第 08 行 和 第 44 行 是 页 面 的 body 标 签 ， 对 应 图 中 的 body{}。 
第 09 行 和 第 43 行 是 页 面 最 外 层 容 器 ， 对 应 图 中 的 #doc。 第 10~14 行 是 右 侧 导 航 ， 对 应 图 12.11 
ph 的 斩 ightNav{} 区 域 。 第 15~19 行 是 页 面 头 部 ， 对 应 图 12.11 中 的 坤 df} 区域。 第 20~37 行 是 页 
向 主 体内 容 ， 对 应 图 12.11 中 的 #bd{} 区 域 ， 第 38~42 行 是 页 脚 ， 对 应 图 12.11 中 的 #ft{} 区 域 。 
第 22~27 行 是 公司 信息 ， 对 应 图 12.11 中 的 .left-column{} 区 域 ， 第 28~35 行 是 服装 展示 ， 对 应 图 
12.11 中 的 .right-column{} 区 域 。 第 23 行 是 公司 信息 中 的 大 图 片 ， 对 应 图 12.11 中 的 img 区 域 ， 第 
24~26 行 是 公司 信息 中 的 关于 我 们 ， 对 应 图 12.11 中 的 .us{} 区 域 ， 第 29~31 行 和 第 32~34 行 是 2 个 
肛 装 展示 列表 ， 分 别 对 应 图 12.11 中 的 2 个 .list{} 区 域 。 


如 


12.3.7 内 页 XHTML 代码 总 览 


前 面 对 产 品 信息 页 各 个 模块 的 XHTML 代码 进行 了 逐一 编写 ， 如 图 12.12 所 示 是 这 些 模块 
组 成 的 产品 信息 页 的 XHTML 框架 图 ， 说 明了 层 的 嵌 套 关系 。 


html 
body{} 


图 12.12 产品 信息 页 的 XHTML 框架 


在 这 些 XHTML 代 码 的 基础 上 增加 页 面 的 <IDOCTYPE> 声 明 及 html 头 部 元 素 ， 就 是 产品 信 
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息 页 的 完整 XHTML 代码 。 完 整 的 产品 信息 页 的 XHTML 代码 如 下 。 


/> 


代码 12-8 

01 <!DOCTYPE HTML> 

02 <html> 

03 <head> 

04 <meta charset="utf-8"> 

05 <title> 产 品 信息 页 </title> 

06 <link href="css/style.css" rel="stylesheet" type="text/css" 
07 </head> 

08 <body> 

09 <xdiv id="doc"> 

10 <!--start of rightNav--> 

11 <xdiv id="rightNav"> 

12 see 

13 </div> 

14 <!--end of rightNav--> 

15 <l-—start of hd==> 

16 <div id="hd" class="cf"> 

1 了 00 

18 </div> 

L9 <l==end of hd==> 

20 <1==start ol bd==> 

21 <div id="bd" class="cf"> 

之 <div class="left-column"> 
23 <div class="big-pic"> 
24 ses 

25 </div> 

26 <div class="buy"><a href="#"> 放 入 购物 车 </a></div> 
之 江 <div class="small-pic"> 
28 woe 

2 </div> 

30 <div class="info cf"> 
3 oo 

32 </div> 

33 </div> 

34 <div class="right-column"> 
35 <div class="detail"> 
本 二 oo 

Eh </div> 

38 </div> 

39 </div> 

40 <!--end of bd--> 

SL <I astart DF EE=> 

42 <xdiv id="ft" class="cf"> 

43 0 

44 </div> 

A5. <l==end of ft==> 

46 </div> 

47 </body> 
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中 的 要 ightrNavf} 区 域 


48 </html> 


第 01 行 是 页 面 的 <!IDOCTYPE> 声 明 。 第 03~07 行 是 html 头 部 元 素 。 第 02 行 和 第 48 行 是 页 面 


四 


第 22~33 行 是 商品 简 
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的 html 标 签 ， 对 应 图 中 的 html{}。 第 08 行 和 第 47 行 是 页 面 的 body 标 签 ， 对 应 图 中 的 body{}。 
第 09 行 和 第 46 行 是 页 面 最 外 层 容 器 ， 对 应 图 中 的 #doc。 第 10~14 行 是 右 侧 导 航 ， 对 应 图 12.12 
。 第 15~19 行 是 页 面 头 部 ， 对 应 图 12.12 中 的 #bd{} 区 域 。 第 20~40 行 是 页 
主体 内 容 ， 对 应 图 12.12 中 的 #bd 了 区 域 ， 第 41~45 行 是 页 脚 ， 对 应 图 12.12 中 的 #ft{} 区 域 。 
， 对 应 图 12.12 中 的 .left-column{} 区 域 ， 第 34~38 行 是 商品 信息 ， 对 应 图 
hp 的 -right-column 全 区 域 。 第 23~25 行 是 商品 简介 中 的 商品 大 图 ， 对 应 图 12.12 中 的 -big-pic 他 


区 域 ， 第 26 行 是 商品 简介 中 的 “ 放 入 购物 车 ”按钮 ， 对 应 图 12.12 中 的 .buy{} 区 域 ， 第 27~29 


行 是 商品 简介 


的 商品 颜色 ， 对 应 图 12.12 中 的 .small-pic 全 区域， 第 30~32 行 是 商品 简介 中 的 


商品 摘要 ， 对 应 图 12.12 中 的 .info{} 区 域 。 第 35~37 行 是 商品 信息 中 的 详细 介绍 ， 对 应 图 12.12 


中 的 .detailf} 区 域 。 


12.4 CSS 编 写 


本 节 将 主要 讲解 新 品 展示 网 站 的 CSS 编 写 ， 


和 内 页 的 CSS 编 写 。 


12.4.1 页 面 公共 部 分 的 CSS 编 写 


页 面 公共 部 分 包括 CSS 重 置 、 页 面 中 的 公用 


脚 和 右 侧 导 航 。 
页 面 头 部 和 页 脚 的 CSS 编 写 将 在 第 12.4.3 小 节 中 编写 。 根 据 前 面 对 页 面 公共 部 分 的 分 析 及 
XHTML 代码 的 编写 ，CSS 重 置 代码 、 页 面 公用 样式 和 右 侧 导航 的 CSS 代 码 编写 如 下 。 


代码 12-9 


01 /*css reset*/ 


包括 页 面 头 部 和 页 脚 、 页 面 公共 部 分 、 首 页 


字体 、 字 体 颜 色 的 样式 ， 以 及 页 面 头 部 、 页 


02 body,div,dl,dt,dd,ul,ol,1i,hil,h2,h3,h4,h5,h6é6,pre,code, form,fieldset, 
legend, input, button, textarea,p,blockquote, th,td{margin:0; padding:0;} 


/* 以 上 元 素 的 内 外 边 距 都 设置 为 0*/ 


04 *.cf{zoom:1;} /* IE 6/7 浏 览 器 (触发 hasLayout) */ 


05 /*global css*/ 

06 a{color:#4B565F;} 

07 a:hover{color:#4B565F;} 

08 .arial{font-family:Arial;} 
09 .hei{font-family:" 黑 体 ";} 
10 .red{color:#FF0000;} 


11 .linethrough{text-decoration:line-through;} 
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.sign{background:url("../images/sign.gif") no-repeat left center; 
padding-left:18px;} 

hl,h2,h3,h4{font-weight:normal;font-size:12px;} 

body{font-family:" 宋 体 ";font-size:12px;color:#5A6F7C;line-height:20px;} 
#rightNav{ 


float:right; /* 右 侧 导 航向 右 浮动 */ 
width:153px; /* 右 侧 导 航 的 宽 */ 
background:#fff; /* 右 侧 导 航 的 背景 色 */ 
margin:0 13px 0 0; /* 右 侧 导 航 的 上 下 左右 外 边 距 */ 
display:inline; /* 解 决 IE 6 下 右 侧 双边 距 bug*/ 


} 
#rightNav a,#rightNav a:hover{color:#fff;} 
#rightNav h2{ 
background:url("../images/m 03.gif") no-repeat left top; 


/* 标 题 背景 图 */ 

color:#fff; /* 标 题 文 字 颜 色 */ 
height:19px; /* 标 题 高 度 */ 
line-height:19px; /* 标 题 行 高 */ 
padding:0 0 0 20px; /* 标 题 的 左 内 边 距 */ 


1 
#rightNav ul{background:#5E6E7B;padding:0 0 50px 0;} 
#rightNav ul 1if{ 


height:16px; /* 右 侧 导 航 列表 每 项 的 高 */ 
line-height:16px; /* 右 侧 导 航 列表 每 项 行 的 高 */ 
border-bottom:1px dotted #fff; /* 右 侧 导 航 每 项 的 下 划 线 */ 
padding:0 0 0 16px; /* 右 侧 导 航 每 项 左边 的 内 边 距 */ 


} 
#rightNav ul li.noline{border-bottom:0;} 


/* 为 右 侧 导 航 的 1i 定 义 一 个 没有 下 划 线 的 类 */ 


第 01~04 行 是 CSS 重 置 代码 ， 与 前 几 章 相同 。 第 05~14 行 是 公用 CSS 代 码 ， 第 15~37 行 是 右 
侧 导 航 的 样式 。 网 站 的 公用 CSS 代 码 是 将 网 页 制作 中 需要 重复 使 用 的 样式 提炼 总 结 出 来 的 ， 
其 中 第 12 行 定义 了 小 图 标 sign.gif 作 为 背景 的 类 ， 网 页 中 的 大 部 分 标题 都 应 用 到 了 这 个 类 。 
第 16 行 实现 了 右 侧 导航 向 右 浮动 ， 第 20 行 对 display 的 设置 是 为 了 解决 在 IE 6 下 要 ightNav 右 边 
距 双 倍 的 问题 ， 第 24 行 为 标题 定义 了 背景 图 ， 第 26 行 和 第 27 行 共同 实现 了 标题 在 h2 内 垂直 居 


中 。 第 32 行 和 第 33 行 共同 实现 了 右 侧 导航 列表 的 每 一 项 在 1 标签 内 垂直 居中 。 


12.4.2 页 面 框架 的 CSS 编 写 
前 面 分 析 了 页 面 的 布局 图 并 且 编写 了 页 面 框架 的 XHTML 代码 ， 根 据 这 两 部 分 编写 页 面 


框架 的 CSS 代 码 如 下 。 
代码 12-10 
01 #doct{ 
02 width:766px; /*#doc 的 宽度 */ 
03 background:#fff; /*#doc 的 背景 色 */ 
04 margin:10px auto 0; /*#doc 的 外 边 距 */ 
05 border-top:1px solid #5E6E7B; /*#doc 的 上 边框 */ 
06 background:url("../images/bg.gif") repeat left top;/*#doc 的 背景 图 */ 
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有 了 

08 #rightNavi{float:right;width:153px;background:#fff;margin:0 13pPx 0 07 

display:inline;} 

09 #hd{height:50px;position:relative;margin:0 153px 0 12px; 

border-left:1lpx solid #5E6E7B;padding:1l0px 0 0 0;} 

10 #bd{margin:0 166px 0 12px;background:#fff;padding:1l5px 0 0;} 

11 #ft{margin:0 166px 0 1l2px;height:44px;line-height:44px;} 

第 01~07 行 代码 是 对 页 面 最 外 层 容器 #doc 的 定义 ， 第 08 行 是 右 侧 导 航 ， 在 第 12.4.1 中 已 经 
讲解 过 该 部 分 的 CSS 代 码 ， 第 09 行 是 页 面 头 部 最 外 层 容器 的 样式 ， 第 10 行 是 页 面 主体 内 容 最 
外 层 容器 的 样式 ， 第 11 行 是 页 脚 最 外 层 容 器 的 样式 。 第 02 行 定义 了 #doc 的 宽度 ， 第 04 行 实现 
了 #doc 在 整个 屏幕 中 水 平 居 中 显示 ， 第 06 行 通过 在 background 中 设置 了 bg.gif 图 片 在 X 和 Y 方 向 
同时 重复 ， 实 现 了 bg.gif 这 张 图 片 铺 满 整个 #doc 容 器 。 


12.4.3 页 面 头 部 和 页 脚 的 CSS 编 写 


前 面 分 析 了 页 面 头 部 并 且 编写 了 页 面 头 部 的 XHTML 代码 ， 页 面 头 部 的 CSS 代 码 如 下 。 


代码 12-11 
01 #haf 
02 height:50px; /*#had 的 高 */ 
03 position:relative; /*#hd 相 对 定位 */ 
04 margin:0 153px 0 12px; 
05 border-left:1lpx solid #5E6E7B; /*#hd 的 左边 框 */ 
06 padding:l0px 0 0 0; 
[1 br 0 1 
08 #hd hif{ 
09 background:url("../images/logo.gif") no-repeat left top; 
/* 标 志 的 背景 图 片 */ 
10 width:141px; /* 标 志 的 宽 */ 
LT height:71px; /* 标 志 的 高 */ 
了 2 position:absolute; /* 标 志 相对 定位 */ 
13 top:O0px; /* 标 志 顶 部 相对 父 容器 #hd 的 上 边 距 */ 
14 left:431px; /* 标 志 左 边缘 相对 父 容器 #hd 的 左边 距 */ 
i 
16 #hd hl at{ 
17 width:100%; 
18 height:100%; 
19 display:block; /* 将 a 标签 转换 成 块 元 素 */ 
20 text-indent:-999em; /*a 中 的 文字 向 左 移动 999em*/ 
2 overflow:hidden; /* 截 掉 洲 出 a 之 外 的 部 分 */ 
0 


23 #hd p{font-size:20px;margin:0 0 0 24px;} 
24 #hd p.sign{ 


25 font-size:18px; 
26 margin:0 0 0 Spx; 
二 Color:#4D565F; 
ph } 


第 03 行 定义 了 头 部 最 外 层 容 器 #bd 为 相对 定位 ， 第 12 行 定义 了 标志 为 绝对 定位 ， 第 13 行 
定义 了 标志 距离 #bd 顶 部 0px， 第 14 行 定义 了 标志 距离 栅 d 左 侧 431px， 这 4 句 代码 共同 实现 了 
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头 部 标志 在 机 d 容 器 中 的 精确 定位 。 第 20 行 通过 将 text-indent 设 置 为 -999em， 使 4 标签 中 的 文字 
向 左 移动 999em， 由 于 999em 是 一 个 非常 大 的 数字 ， 因 此 编写 这 行 代码 的 结果 就 是 a 标签 中 的 
文字 已 经 不 在 屏幕 显示 范围 内 了 ， 但 是 如 果 有 足够 宽 的 显示 器 ，a 中 的 文字 仍 能 看 到 。 第 21 行 


通过 设置 overflow 的 值 为 hidden， 将 溢出 a 标 签 的 内 容 截 掉 ， 由 此 a 标 签 中 的 文字 无 论 显示 器 有 
多 宽 都 不 会 显示 于 屏幕 上 了 。 

前 面 分 析 了 页 脚 并 且 编写 了 页 脚 的 XHTML 代码 ， 页 脚 的 CSS 代 码 如 下 。 

代码 12-12 

01 #ft{ 

02 margin:0 166px 0 12px; 

03 height:44px; 

04 line-height:44px; 

Aso 

06 #ft .copyRight{ 

07 text-align:center; 

08 font-size:11Px7 

09 background:#D1D1D17 

10 width:282px; 

11 float:left; 

L200 


13 #ft .bomNav{text-align:center;} 
14 #ft .bomNav a{margin:0 Spx;} 


第 03~04 行 共同 实现 了 页 脚 内 容 在 # 术 容器 中 垂直 居中 。 


12.4.4 首页 主体 内 容 的 CSS 编 写 
体内 容 的 分 析 和 首页 主体 内 容 的 XHTML 代码 ， 编 写 首页 主体 内 容 的 CSS 代 


1 


根据 对 首页 
码 如 下 。 


代码 12-13 


01 .left-column{float:left;width:288px;} 

02 .left-column img{display:block;} 

03 .left-column .us{margin:20px 0 0;background:url("../images/index 512.gif") 
no-repeat left top;height:265px;} 

04 .left-column .us h3{margin:0 10px;} 

05 .left-column .us p{margin:0 20px 1l5px;} 

06 .right-column{float:left;width:300px;margin:10px 0 0;overflow:hidden;} 

07 .right-column .list{background:url("../images/index 57.gif") 
no-repeat left top;} 

08 .right-column .list .hd{height:28px;overflow:hidden;} 

09 .right-column .list .hd .more{float:right;background:url 
("../images/arrow.gif") no-repeat right 10 center; 
line-height:20px;margin:0 65px 0 0;width:42px; 
padding:0 0 0 l8px;display:inline;} 

10 .right-column .list .hd h4{line-height:30px;} 

11 .right-column .list ul{width:320px;overflow:hidden;} 

12 .right-column .list ul li{background:url("../images/om bg.gif") 
no-repeat center top;float:left;width:88px;height:100px; 
margin:0 7px 0 3px;display:inline;} 
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13 .right-column .list ul li img{display:block;height:67px; 
margin:1lpx auto Spx;} 

14 .right-column .list ul li p{background:url("../images/zoom.gif") 
no-repeat 3px center;padding:0 0 0 1l5px;} 


第 01~05 行 是 公司 信息 的 CSS 样 式 。 第 06~14 行 是 服装 展示 的 CSS 样 式 。 第 01 行 和 第 06 行 
通过 设置 float 的 值 为 left， 实 现 了 公司 信息 和 服装 展示 最 外 层 容 器 向 左 浮动 。 第 02 行 通过 将 图 
片 设置 为 块 元 素 ， 解 决 了 浏览 器 中 图 片 下 方 3 像素 空白 的 问题 。 第 03~05 行 是 公司 信息 中 “ 关 
于 我 们 ”的 CSS 样 式 ， 其 中 第 04 行 定义 了 “关于 我 们 ”中 标题 的 样式 ， 第 05 行 定义 了 “关于 
我 们 ”中 几 个 段落 的 样式 。 第 11~14 行 是 每 个 服装 展示 列表 的 样式 。 第 09 行 通过 设置 foat 的 值 
为 right， 实 现 了 “更 多 ”按钮 向 右 浮动 。 


12.4.5 内 页 主体 内 容 的 CSS 编 写 


根据 对 内 页 主体 内 容 的 分 析 和 内 页 XHTML 代码 ， 编 写 内 页 主体 内 容 的 CSS 代 码 如 下 。 
代码 12-14 


01 .right-column .detail{background:url("../images/product 05.gif") 
no-repeat left top;padding:0 15px 0 Spx;height:472px;} 

02 .right-column .detail p{margin:0 8px;line-height:18px;} 

03 .left-column .big-pic{background:url("../images/spl.gif") 
no-repeat right top;height:268px;} 

04 .left-column .big-pic h3{margin:0 0 0 1l0px;} 

05 .left-column .big-pic img{margin:-10px auto 0;} 

06 .left-column .buy{background:url("../images/product 07.gif") 
no-repeat 200px center;padding:0 lO0px;text-align:right; 
height:24px;line-height:24px;} 

07 .left-column .small-pic{background:url("../images/product 13.gif") 
no-repeat center top;height:1l0px;margin:0 auto;} 

08 .left-column .small-pic h3{margin:0 0 0 lO0px;} 

09 .left-column .small-pic ul{overflow:hidden;padding:1l0px 0 0 10px;} 

10 .left-column .small-pic ul li{width:63px;height:68px;float:left;margin:0 13px; 
display:inline;} 

11 .left-column .info{margin:0 0 22px;} 

12 .left-column .info dlf{float:left;line-height:18px;margin:7px 0;} 

13 .left-column .info dl.info-list-left{width:65%;} 

14 .left-column .info dl.info-list-right{width:30%;} 


第 01~02 行 是 商品 简介 的 CSS 样 式 。 第 03~14 行 是 商品 信息 的 CSS 样 式 ， 其 中 第 03~05 行 实 
现 了 商品 简介 中 商品 大 图 部 分 的 效果 ， 第 06 行 是 “ 放 入 购物 车 ”按钮 的 样式 ， 第 07~10 行 是 
商品 颜色 部 分 的 样式 ， 第 11~14 行 是 商品 摘要 的 样式 。 第 13 行 和 第 14 行 中 通过 设置 width 的 值 
为 百分数 ， 也 可 以 控制 相应 div 容 器 的 宽度 。 


12.4.6 网 站 CSS 代 码 总 览 


前 面 讲解 了 页 面 头 部 、 页 脚 、 页 面 主体 内 容 、CSS 重 置 和 页 面 公用 的 CSS 代 码 ， 这 些 代 
码 共同 组 成 了 网 站 页 面 的 完整 CSS 代 码 ， 如 代码 12-15 所 示 。 
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代码 12-15 


01 charset "utf-8"; 
02 /*css reset*/ 


04 /*global css*/ 


06 /*module css*/ 
07 /*index.html*/ 


08 .left-column{ } 


10 /*page.html*/ 


11 .right-column .detail{ } 


-二 省 咯 的 代码 在 每 个 小 节 中 部 有 讲解 ， 这 里 不 再 次 壕 。 


12.5 制作 中 需要 注意 的 问题 


12.5.1 网 页 的 编码 格式 


常用 的 网 页 编码 格式 有 两 种 :UTF-8 编 码 格式 和 GBK 编 码 格 式 。 


珀 
忆 


®@ UTF-8 包 含 全 世界 所 有 国家 需要 用 到 的 字符 ， 是 国际 编码 ， 通 用 性 强 。UTF-8 编 码 的 


文字 可 以 在 各 国 支 持 UTF8 字 符 集 的 浏览 器 上 显示 ， 也 就 是 说 ， 如 果 是 UTF-8 编 码 ， 
则 在 外 国人 的 英文 IE 上 也 能 显示 中 文 ， 他 们 无 需 下 载 IE 的 中 文 语言 支持 包 。 
GBK 是 在 国家 标准 GB2312 的 基础 上 扩容 后 兼容 GB2312 的 标准 。GBK 的 文字 编码 是 
用 双 字 节 来 表示 的 ， 即 不 论 中 、 英 文字 符 均 使 用 双 字 节 来 表示 ， 为 了 区 分 中 文 ， 将 
其 最 高 位 都 设 定 成 1]。GB 玫 包含 全 部 中 文字 符 ， 是 国家 编码 ， 通 用 性 比 UTF-8 差 ， 不 
过 UTF-8 占 用 的 数据 库 比 GBK 大 。 


为 了 良好 的 通用 性 ， 现 在 的 网 站 一 般 都 采用 UTF-8 的 网 页 编码 格式 。 
12.5.2 CSS 加 入 网 页 的 方法 


把 CSS 加 入 网 页 的 方法 主要 有 3 种 : 内 部 样式 表 、 行 内 样式 表 ( 内 榜样 式 表 〉、 外 部 样式 表 。 


内 部 样式 表 主 要 定义 在 <head> 内 。 

行内 样式 表 可 直接 使 用 style 属 性 定义 在 标签 内 部 。 

使 用 外 部 样式 表 时 ，CSS 文 件 与 网 页 的 XHTMIL 文 件 是 分 离开 的 ， 分 开 的 文件 要 用 
<link rel="stylesheet" type="text/css" hre 全 "文件 位 置 /你 的 CSS 文 件 名 .css"/> 链 接 起 来 ， 
这 种 方法 主要 针对 CSS 样 式 表 较 多 的 网 页 ， 特 别 是 要 与 div 标 签 结合 的 网 页 。 
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本 章 将 主要 介绍 网 站 源 代码 的 整理 、 购 买 空间 和 域名 时 的 注意 问 
题 、 如 何 上 传 网 站 、 网 站 后 期 的 维护 和 运营 。 
本 章 主 要 涉及 到 的 知识 点 如 下 。 


网 站 源 代 码 整 理 : 网 站 代码 的 检查 和 压缩 。 

购买 空间 和 域名 : 购买 空间 和 域名 时 需要 注意 的 问题 。 
上 传 网 站 : 讲解 如 何 利 用 FileZilla 上 传 网 站 到 服务 器 。 
维护 与 运用 : 简单 介绍 一 下 网 站 的 维护 和 运营 的 内 容 。 


13.1 整理 源 代码 


本 节 将 主要 介绍 在 制作 完 网 站 后 如 何 对 源 代码 进行 整理 ， 主 要 包括 代码 的 检查 和 压缩 。 
网 站 的 源 代 码 进 行 适当 的 整理 不 但 可 以 将 错误 减 小 到 最 少 ， 而 且 压缩 后 的 代码 体积 更 小 ， 


可 盖 
0 


高 网 站 浏览 速度 。 
代码 的 检查 主要 包括 HTML 的 检查 和 CSS 样 式 表 的 检查 。 


3.1.1 XHTML 代 码 的 检查 
XHTML 代码 在 检查 时 需要 注意 的 问题 主要 有 以 下 几 点 。 
1. 闭合 XHTML 标签 
在 以 往 的 页 面 源 代码 里 ， 经 常 看 到 这 样 的 语句 : 


<li>Some text here. <li>Some new text here. <li>You get the idea. 


非 闭合 XHTML 标签 不 符合 W3C 标 准 ， 不 但 无 法 通过 验证 ， 并 且 容 易 出 现 一 些 难以 预见 


的 问题 。 


最 好 使 用 这 样 的 形式 : 
<ul> <li>Some text here. </1i> <li>Some new text here. </1i> 


<li>You get the idea. </1li> 
</ul> 


2. 不 要 使 用 艇 入 式 CSS 样 式 
嵌入 式 CSS 代 码 ， 例 如 : 


<p style="color: red;"> 网 页 制作 </p> 
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这 样 看 起 来 即 方便 又 没有 问题 ， 但 是 在 后 期 的 维护 和 修改 时 会 产生 不 必要 的 麻烦 。 在 制 
作 网 页 时 ， 最 好 在 内 容 结构 完成 之 后 再 开始 加 入 样式 代码 ， 例 如 ， 把 这 个 P 的 样式 定义 在 样 
式 表 文件 里 : 


bt color:, red7 } 

3. 使 用 小 写 的 标记 

从 理论 上 讲 ， 可 以 像 这 样 随 性 地 书写 标记 : 

<DIV> <P>Here's an interesting fact about corn. </P> </DIV> 


在 W3C 的 标准 中 ， 建 议 在 HTML 4 中 使 用 小 写 标 签 ， 而 在 XHTML 中 ， 必 须 使 用 小 写 标 
签 ， 所 以 最 好 不 要 用 大 写字 母 书写 XHTML 标签 ， 费 力气 输入 大 写字 母 没有 任何 用 处 ， 最 好 
这 样 写 ， 例 如 : 


<div> <p>Here's an interesting fact about corn. </p> </div> 
4. 使 用 H1~H6 标 签 


在 网 页 中 使 用 了 会 有 很 多 好 处 ， 例 如 设备 友好 、 搜 索引 擎 友好 等 ， 制 作 网 页 时 要 尽 可 能 
地 充分 利用 也 标签 。 


5. 缩减 代码 


为 了 控制 定位 而 套 上 更 多 的 div， 甚 至 把 一 个 段落 用 div 包 起 来 ， 其 实 这 是 一 种 低 效 而 有 
害 的 做 法 。 例 如 ， 能 用 ul 布局 的 列表 就 不 要 用 一 个 个 的 div 去 布局 。 


13.1.2 CSS 代 码 的 检查 


CSS 代 码 在 检查 时 需要 注意 的 问题 主要 有 以 下 几 点 。 

1. 各 浏览 器 的 兼容 问题 

检查 CSS 的 应 用 是 否 使 网 页 在 各 浏览 器 中 的 表现 一 致 。 

2. CSS 属 性 书写 是 否 正确 

有 些 CSS 属 性 名 称 比 较 长 ， 应 检查 书写 是 否 正确 ， 书 写 错 误 的 样式 属性 在 页 面 上 是 看 不 
到 任何 效果 的 。 

3. 使 用 CSS 的 缩写 

CSS 的 缩写 用 来 代替 多 个 相关 属性 和 值 的 集合 。 例 如 ， 内 边 距 padding 是 上 内 边 距 padding- 
top、 右 内 边 距 padding-right、 下 内 边 距 padding-bottom 和 左 内 边 距 padding-left 的 缩写 。 

使 用 CSS 缩 写 可 以 把 多 个 属性 / 值 对 压缩 进 CSS 样 式 表 的 一 行 代 码 里 ， 不 但 有 利于 阅读 ， 
而 且 减 少 了 CSS 样 式 表 的 大 小 。 

4. 减少 空 
少 CSS 样 式 表 大 小 的 另 一 种 方法 是 从 文档 里 删 掉 大 多 数 无 用 的 空白 。 换 句 话说 ， 将 每 
条 规则 放 进 一 行 代 码 里 。 例 如 ， 下 面 的 代码 示例 在 内 容 上 相同 ， 但 是 第 二 个 要 精炼 得 多 : 
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hn 
font-size: x-large; 
font-weight: bold; 
color: #FF0000; 


} 
hl {font-size: x-large; font-weight: bold; color: #FF0000} 


5. 删 掉 注释 

将 注释 从 CSS 代 码 里 删 掉 可 以 减少 文件 大 小 。 尽 管 注释 对 于 代码 的 阅读 很 有 用 ， 但 是 它 
无 助 于 浏览 器 生成 Web 页 面 。 很 多 Web 建 设 者 都 习惯 给 每 一 行 代码 加 上 注释 ， 或 者 至 少 给 每 
一 条 规则 都 加 上 声明 。 这 样 的 “慷慨 ”注释 在 CSS 样 式 表 里 是 极 少 需要 的 ， 因 为 大 多 数 CSS 
性 质 和 属性 都 很 容易 阅读 和 理解 。 如 果 在 样式 表 中 对 类 、ID 以 及 其 他 的 选择 器 都 使 用 有 意义 
的 名 称 ， 就 可 以 省 掉 大 多 数 的 注释 ， 同 时 仍然 能 够 保持 代码 的 可 读 性 和 可 维护 性 。 


13.1.3 网 页 调试 


作为 网 站 页 面 的 开发 者 ， 各 种 网 页 的 调试 工具 必 不 可 少 。 尤 其 是 在 遇 到 浏览 器 兼容 问 
题 时 ， 有 一 款 好 用 的 网 页 调试 工具 显得 尤为 珍贵 。 合 理 使 用 调试 工具 不 但 能 快速 找到 问题 来 
源 ， 而 且 能 提高 工作 效率 。 

常见 的 网 页 调试 工具 主要 有 Firebug、 正 DeveloperToolbar， 以 及 Chrome 浏 览 器 下 的 页 面 调试 工具 。 


1. Firefox 浏 览 器 下 的 页 面 调试 工具 


Firebug 是 Firefox 浏 览 器 的 一 个 插件 ， 使 用 时 单 击 浏览 器 右 下 角 或 右上 角 〔 视 版 本 决定 ) 
的 萤火虫 图 标 ， 如 图 13.1 所 示 ， 或 者 按 F12 键 ， 即 可 启用 这 个 插件 。 


站 四- 县 会 日 - 
-图 访问 最 多 尖 Localhost » 
PIPPI 


图 13.1 Firebug 的 萤火虫 图 标 


如 图 13.2 所 示 是 打开 后 的 Firebug 面 板 ， 主 要 菜单 选项 有 : 控制 台 、HTML、CSS、 脚 
本 、DOM、 网 络 ， 共 6 个 。 调 试 XHTML 和 CSS 时 可 能 用 到 的 是 HTML 和 CSS。 


elenent. strie { 
displar: none; 
position: absolute; 
z-index: 9999: 

} 


图 13.2 Firebug 面 板 
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(1) HTML 菜单 


HTML 菜单 主要 用 于 查看 当前 页 面 的 XHTML 源 代 码 ， 单 击 “HTML” 菜 单 后 ，Firebug 面 
板 右 侧 弹出 4 个 子 菜单 ， 分 别 是 : 样式 、 计 算出 的 样式 、 布 局 和 DOM。 

e “样式 ”用 于 查看 每 个 XHTML 标 签 对 应 的 CSS 样 式 。 

@ “计算 出 的 样式 ”用 于 查看 浏览 器 自动 计算 出 的 选中 的 XHTML 标签 样式 ， 这 些 样式 


是 经 过 履 盖 等 过 程 后 最 终 显 示 在 页 面 中 的 样式 。 
e “布局 ”用 于 显示 用 户 所 选中 的 容器 的 盒 模型 。 


e “DOM” 用 于 JavaScript 调 试 。 
(2) CSS 菜 单 


CSS 菜 单 用 于 查看 网 页 加 载 的 所 有 CSS 样 式 表 。 


如 需 查 看 某 一 部 分 代码 ， 单 击 插件 上 的 查看 页 面 元 素 按钮 后 ， 鼠 标 移 到 网 页 上 ， 会 出 现 
一 个 相应 的 框 ， 当 框 选 需要 查看 源 代 码 的 元 素 后 单 击 ， 在 插件 区 域 就 显示 出 当前 区 域 的 代码 


及 样式 了 ， 可 以 禁用 某 些 样式 ， 还 可 以 添加 新 的 样式 来 查找 问题 所 在 。 


如 图 13.3 所 示 ， 先 点 @ 位 置 处 的 查看 页 面 元 素 按钮 ， 然 后 鼠标 移动 到 @ 的 地 方 ， 会 出 现 


图 中 所 示 的 蓝 色 线 框 ， 然 后 单 击 鼠标 ， 会 选中 @ 位 置 的 代码 并 在 @ 位 置 出 现 对 该 区 域 生效 的 


所 有 样式 。 当 鼠标 移动 到 @ 位 置 时 ， 会 出 现 一 个 禁止 图 标 ， 单 击 后 禁用 当前 样式 ， 从 而 便于 


查找 问题 所 在 。 


公司 简介 


PP pe ee 
决 方案 提 1 ¢ 
的 电信 运营 和 企业 同 户 提供 罗技 术 与 关 
品 解决 方案 
Communications 拥 有 通信 站 界 最 完整 的 、 庙 3 产品 线 和 台 合 解 天 广 
案 , 通过 全 系列 的 无 线 、 有 线 、 业 务 、 终 端 产 品 和 专业 通信 最 务 ， 灵活 匣 
足 全 球 不 同 运营 商 和 企业 网 客户 的 差异 化 震 求 以 及 快速 创新 的 追求 。 


未 来 ， 公 司 将 继 综 致力 于 引领 全 球 通信 产业 的 发 展 ， 应 对 全 球 通信 和 领域 更 
赵 日 新 月 异 的 找 战 。 


加 1998-2012. Communications Co .版 权 所 有 


公司 新 闻 O 


日 2012-4-13 
ommunications 通 讯 北 界 首次 实现 400Gb/ :信号 超 


F000 公里 超 长 距离 传输 


目 2012-3-25 
ommuni cations 通 讯 拟 手 英国 电信 次 6TB 创 新 大 奖 


限 设 全 球 最 快 XG-PON 络 。 


国 《div id="hd” class="ef”> 
日 tdiv id="bd” class="cf"> 


div id="st” class="eray font-tahosa”>© 1998-2012 
Communications Co, 版 权 所 有 </div> 
jaivy 
</bodr> 


style.css (第 3 行 ) 司 


图 13.3 用 Firebug 调 试 


另外 还 可 以 在 如 图 13.4 所 示 的 @ 位 置 的 任意 一 行 代码 后 面 双击 插入 新 的 样式 ， 插 入 新 样 
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式 后 ， 浏 览 器 可 以 实时 显示 应 用 新 样式 后 的 效果 。 


div class="content”> 
El 


ions 迁 讯 是 全 
入 
提供 高 。 公 司 为 全 球 160 多 
个 国 衣 和 地 区 的 电信 运营 高 
和 企业 网 客户 提供 创新 技术 
与 产品 解 详 方 计 . 

/p> 

《py Communications 捉 有 有 适 

信 业 措 最 完整 的 、 党 到 将 的 产 

品 线 和 融合 解决 方 新 通过 全 


EE sre= images/pixl. gif”> 


-introduce .content p { 
margin: 0 0 12px; 


,0 


body, div, dl, dt, dd, 
ul, ol, li, hi, h2, h3, 
h4, h5, hé, pre, code, 
form, fieldset, legend, 
input, button, textarea, 
Dp: blockauote, th, td { 
GO 
Dadding: 0; 


妆 承 自 divsbd of 


BS™ css (第 58 行 ) 三 | 


style-css (第 3 行 ) 


图 13.4 双击 插入 新 的 样式 


也 可 以 在 如 图 13.5 所 示 的 @ 位 置 的 任意 一 行 代码 的 属性 对 应 值 上 单 击 修改 属性 值 ， 修 改 
属性 值 后 ， 浏 览 器 同样 可 以 实时 显示 应 用 新 属性 值 后 的 效果 。 


HTML ~ 


路， 编辑 ，at-deepblaue “ddiv nens div 和 bd cf 
ee 


国 <div id=“hd” class="cf°> 
四 《div id="bd” class="cf”> 
《div class="introduce”> 
日 人 div class="news”> 
<h2> 
<dl> 


困 《dd class= =t8 sb45 > 
aly 
国 <dl> 
div 


| 


万 
祥 式 v7 


-deepblue [ 
color: 


} 
body, div, dl, dt, dd, 
ul, ol, li, hi, h2, h3, 
hh, h5, hé, pre, code, 
forn, fieldset, legend, 
input, button, textarea. 
Dp, blockauote, th, td { 

margin: 0: 

se 

】} 
她 承 自 divsbd cf 


{ 


图 13.5 单 击 修改 属性 值 


strle. css (第 25 行 ) 加 


strle. css (第 3 行 ) 


如 图 13.6 所 示 ， 在 HTML 菜单 下 ， 选 中 class 是 content 的 容器 ， 单 击 右 侧 的 “布局 ” 子 菜 


单 ， 可 以 查看 容器 content 的 盒 模型 。 
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公司 简介 395*186 50 ,公司 新 闻 


目 2012-4-13 


ommuni cations 通 讯 业界 首次 实现 
公里 超 长 距离 传输 。 


目 2012-3-25 


ommuni cations 通 讯 扒 手 英国 电信 | 
陵 设 全 球 最 快 XG6-PON 网 络 。 


div. content ‘div. introduce 
《div id="hd” class="cf”> 
div id-"bd” class="cf”> 
Btdiv class="introduce”> 上 


困 <h2> 


divy 民 


日 div class="news”> 
国 《<h2> 
<dl> 
dt class="deepblue 
font-tahona”> 2012-4-13</¢ 
图 《dd class="stS sb45"> 
/nly 


Zz: auto 


一 由 一 | 图 | 


图 13.6 查看 容器 的 盒 模型 


2. IE 浏 览 器 下 的 页 面 调试 工具 


正 Developer Toolbar 是 微软 为 Web 开 发 人 员 设 计 的 一 款 网 页 调试 工具 ， 用 于 还 下 XHTML 和 
CSS 的 调试 。 使 用 方法 和 火狐 的 Firebug 类 似 。 

如 果 安 装 的 是 IE 8 或 IE 8 以 上 版 本 的 浏览 器 ， 打 开 浏览 器 后 ， 按 F12 键 ， 可 以 打开 相似 
功能 的 面板 ， 不 需要 任何 安装 。 如 果 是 IE 7 或 以 下 版 本 ， 需 要 下 载 IE Developer Toolbar 并 进 
行 安装 。 

如 果 是 IE 8 或 以 上 版 本 ， 打 开 浏览 器 后 ， 可 按 F12 键 或 在 耻 头 部 的 工具 栏 中 单 击 “F12 
开发 人 员工 具 ”， 如 果 是 耻 7 或 以 下 版 本 ， 可 在 IE 头 部 的 工具 栏 中 单 击 “ 工 具 栏 ”， 再 单 击 
“浏览 器 栏 ” 中 的 “IE Developer Toolbar” 即 可 打开 该 工具 ， 如 图 13.7 所 示 是 IE 8 下 的 开发 人 
员工 具 面板 。 
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公司 首页 - 开发 人 员工 具 
文件 P) 查找 中 禁用 BE) 查看 W) 辊 廊 人 _) 图 便 0) 组 存 C) 工具 CD) 验证 内 
浏览 器 模式 :IE8 @】 文本 模式 和): IE8 标准 己 


|。 开机 局 
BB 回 inherited - body Ee 
忆 回 BopY style-css 
由 <head> 回 fonc-fanily : “未 体 "; BACKSROUND: url(.-/1i 
<body> 加 color : #545454 
回 font-size : 12px 
style.css 


ayle.caa 
回 padding-borcom : 9px 
回 margin ; 105px auro 
回 padding-lefe : Spx 

本 各 本 


图 13.7 正 8 下 的 开发 人 员工 具 面 板 


在 IE 的 开发 人 员工 具 面板 中 ， 与 XHTML 和 CSS 调 试 有 关 的 是 HTML 和 CSS 菜 单 。HTML 
菜单 的 功能 与 Firebug 中 的 HTML 菜 单 相似 ， 可 以 查看 页 面 的 XHTML 代码 和 容器 所 应 用 的 CSS 
样式 。CSS 菜 单 可 以 查看 网 页 加 载 的 所 有 CSS 样 式 。 

击 HTML 菜 单 后 ， 面 板 的 左 侧 即 为 页 面 的 XHTML 代码 ， 面 板 右 侧 包括 4 个 子 菜单 ， 其 
“样式 ”可 以 查看 左 侧 选中 容器 上 所 应 用 的 CSS 样 式 ， 勾 选 CSS 代 码 前 面 的 复 选 框 ， 表 
示 应 用 此 样式 ， 取 消 勾 选 表 示 删 除 该 样式 ， 如 图 13.8 所 示 是 勾 选 和 取消 勾 选 复 选 框 ，“ 跟 踪 
样式 ”可 以 查看 左 侧 选中 容器 上 应 用 的 浏览 器 计算 出 的 样式 ，“ 布 局 ”可 以 查看 左 侧 选中 容 
器 的 盒 模 型 ， 在 “属性 ” 子 菜单 中 ， 单 击 “ 添 加 属性 ”或 “删除 属性 ”按钮 ， 可 以 为 左 侧 选 
中 的 XHTML 容器 增加 CSS 样 式 或 删除 CSS 样 式 ， 如 图 13.9 所 示 是 为 页 面 中 的 #doc 容 器 增加 样 
式 background:red 后 ， 页 面 背 景 变 为 红色 。 


-Communicatiors 


中 : 


文件 国 ， 查 找 叫 ”本 狂 6) 查看 W) 轧 及 几 ) 型 像 C) 经 存 () 工具 0) 验证 从 ) 


ia 要: Im D 文 模式 加 :TB 村 相 世 


i 司 
拜 式 。 跟踪 衬 式 布局 [属性 

全 RE: [全 | xss:mr 
信 


ae 
baskgr ound. red. 


图 13.8 勾 选 和 取消 勾 选 复 选 杠 图 13.9 为 页 面容 器 #doc 增 加 样式 background:red 
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6 每 行 的 CSS 代 码 可 以 修改 相应 的 属性 或 值 ， 如 图 13.10 所 示 。 


自 回 BODY 
国 font-family : "未 体 "; BACKd 
回 color : #54545 
| 四 |fcnt-size : 区 全 | 
图 13.10 单 击 每 行 的 CSS 代 码 可 以 修改 相应 的 属性 或 值 


3. Chrome 浏 览 器 下 的 页 面 调试 工具 
Chrome 浏 览 器 下 的 开发 者 工具 ， 是 Chrome 浏 览 器 自 带 的 一 款 用 于 调试 网 页 的 工具 。 


霜 


开 开 发 者 工具 面板 的 方法 有 多 种 ， 可 以 直接 在 页 面 上 单 击 右键 ， 然 后 选择 审查 元 素 ， 或 者 从 
Chrome 的 右上 角 的 工具 栏 中 打开 ， 或 者 按 F12 键 打开 ， 如 图 13.11 所 示 是 打开 的 开发 者 工具 面 


板 。 


Compnuted 子 菜 音 


[eemens | Resources Network Sources Timeline Profiles Audits Console x 
Re Dstyes| Computed | Event Listeners > 
<html> EE 
<head>..</head> [elenent.style { + 浏 闪 -加 
v <body> 了 | 
pcdiv id="doc"></div> body { style.css:19 | 
</body> color: 国 #545454; LI 
</html> font-size: 12px; 
font-family:“" 宋 体 "; 
background: purl("../images/bg.gif") 
repeat left top; 
} 
body, div, dl, dt, dd, ul, ol, 3 
li, hil, h2, h3, h4, h5, h6, pre, code, 图 
BB, A hm Be 党 


图 13.11 Chrome 的 开发 者 工具 面板 


在 开发 者 工具 面板 中 ， 与 XHTML 和 CSS 调 试 有 关 的 菜单 主要 是 Elements 菜 单 。 


这 个 菜单 的 作用 是 查看 、 编 辑 页 面 上 的 元 素 ， 包 括 XHITML 和 CSS， 与 Firebug 面 板 中 的 
HIML 菜 单 的 功能 和 用 法 非常 相似 。 


动 计 算出 的 样式 是 各 种 设置 到 该 选中 容器 上 的 CSS 值 覆盖 后 的 样式 。 
如 图 13.12 所 示 是 企业 网 站 的 首页 ， 图 中 @ 是 页 面 元 素 @@ 所 对 应 的 XHTML 代码 ， 图 中 @ 
是 页 面 元 素 @ 所 对 应 的 CSS 代 码 。 


单 击 Elements 菜 单 后 ， 面 板 左 侧 可 以 查看 页 面 的 HTML 结 构 ， 面 板 右 侧 与 XHTML 和 CSS 
有 关 的 子 菜单 是 Styles 和 Computed: Styles 子 菜单 可 以 对 元 素 的 CSS 进 行 查看 与 编辑 修改 ; 


可 以 看 到 左 侧面 板 中 选中 容器 的 盒 模型 和 浏览 器 自动 计算 出 的 样式 ， 其 中 自 
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BEST SLOGAN COMPANY 


公司 简介 公司 新 闻 
目 20124-13 加 
Communi cati ons 通 讯 业界 首次 实现 400Gb/: 
5000 公 里 超 长 距离 传输 。 
通信 业界 晤 完整 的 、 端 到 丹 的 产品 线 和 融合 解决 广 
有 线 、 业 务 、 终 六 产品 和 专业 通信 服务 ， 灵 活 满 四 2012325 
吓 全 不 同和 和 全 业 站 客户 的 异化 和 有 快速 新 的 图 


Stbyles | Computed Event Listeners » 


vediv class="introduce"> EE 


Pp <h2>..</h2> St style { 
过 nt"> 
P <p></p> © Style.css:58 
<p class="green"> 未 来 ， 公 司 将 继续 致力 于 引 | 
领 全 球 通信 产业 的 发 展 ， 应 对 全 球 通信 和 领域 更 趋 日 2 
新 月 异 的 挑战 。</p> body, div, dl, dt, dd, ul, ol, style.css:3 
</div> 1i, hl, h2, h3, h4, h5, h6, pre, code, 
</div> ~ |form, fieldset, legend, input, button, 
pxdiv class=“news">-</div> textarea, p, blockquote, th, td { 
:after 一 一 一 一 
</div> 疝 padding: >8; 加 | 
加 | 演 |Q html | body | dvsdoc | divsbd.cf | divintroduce | divcontent 加 攻 .] 


图 13.12 企业 网 站 首页 中 的 元 系 在 Chrome 开 发 者 工具 中 对 应 的 XHTML 和 CSS 


与 Firebug 中 的 操作 相似 ， 在 如 图 13.12 所 示 的 @ 位 置 的 代码 后 面 双击 可 插入 新 的 样式 ， 也 
可 以 在 CSS 代 码 上 单 击 修改 属性 和 值 。 
如 图 13.13 所 示 是 页 面 元 素 对 应 的 盒 模 型 和 计算 出 的 样式 。 
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加 
目 20124-13 
Comnunications 通 讯 业 界 首次 实现 4006b/: 国 
5000 公 里 超 长 距离 传输 。 
图 
| 图 
Ne = Network Sources Timeline Profiles Audits Console x 
YPE htel | styles | Computed | Event Listeners = 
vchtml> 
P <head>..</head> 口 Show inherited 
vx<body> 


vxdiv id="doc"> 
<!--start of hd--> 
<div id="hd” class="cf">..</div> 
<!--end of hd--> 
<!--start of bd--> 
vxdiv id="bd” class="cf"> 
vxdiv class="introduce"> 
<h2>.-<yh2> 
xdiv class="content"> 
P<p>m</p> 
bP <p>.</p> 
<p class="green"> 未 来 ， 公 司 将 继续 致力 于 引 
领 全 球 通信 产业 的 发 展 ， 应 对 全 球 通信 领域 更 赵 晶 


新 月 异 的 挑战 。</p> P color: reb(s4, 84, 84); 
</div> Pp display: block 
b font-family 球体 ; 
</div> _ bp font-size: Yi2px; 
Pxdiv class="news">.</div> height: 72px; 
:after bp line-height: 18px; 
</div> bb margin-bottom: 12px; 
4 b margin-left: Opx; 
<!--end of bd--> » margin-right: Bpx; 
<!--start of ft--> b margin-top: @px; 
<div id="ft" class="gray font-tahoma">® * padding-bottom: ©@px; 
1998-2612. Communications Co. 版 权 所 有 </div> bpedding-1eft: Gpx; 


* padding-right: Bpx; 


<}--end of ft--> b padding-top: @px; 


</div> width: 395px; 
</body> 一 | Pp zoom: 1; 
</html> 图 
(= ED Q html | body | divsdoc | divzbd.cf | divintroduce | content | 类 


图 13.13 页 面 元 又 对 应 的 盒 模型 和 计算 出 的 样式 


13.1.4 压缩 代码 


网 页 中 的 CSS 和 JavaScript 代 码 在 上 传 到 服务 器 之 前 都 要 进行 压缩 ， 对 代码 进行 压缩 可 以 
为 服务 器 省 下 更 多 的 网 络 流量 ， 提 高 网 站 访客 的 浏览 速度 。 

于 XHTML 文件 中 换行 等 空白 字符 的 删除 有 可 能 导致 部 分 元 素 的 样式 产生 差异 ， 并 且 
动态 XHTML 文件 的 压缩 有 可 能 会 增加 服务 器 的 负担 ， 因 此 XHTML 文件 一 般 不 进行 压缩 。 

CSS 文 件 的 压缩 工具 很 多 ， 例 如 : YUI Compressor、Clean CSS、CSS Optimizer。 压 缩 
工具 一 般 是 把 注释 、 空 格 、 换 行 等 去 掉 ， 当 然 还 有 其 他 可 选 功能 。 有 时 使 用 在 线 压缩 也 很 方 
便 ， 例 如 : http://ganquan.info/yui/?hl=zh-CN、http://fumpcakes.co.uk/css/optimiser/、http://tool. 
oschina.net/jscompress。 


图 13.14 是 使 用 YUI Compressor 在 线 压缩 CSS 代 码 的 截图 。 
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您 可 以 直接 粘贴 JS 或 CSS 代 码 到 下 面 代码 框 或 者 上传 文件 和 URL . 


-index ybd .publicity{position:relative;height: 435px;} 

index wbd .publicity .ad{position:relative;} 

.index #bd .publicity .ad ul 1ifheight: 435px;display:none;} 

.index #bd .publicity .ad ul 1i.show{display:block;} 

.index #bd .publicity .ad afdisplay:block;width:100%;height:100%;margin:0 auto;} 

.index #bd .publicity .ad .adifbackground:ur1("../tenp/x80. jpg”) no-repeat center top;} 
index #bd .publicity .ad .ad2fbackground:ur1("../tenp/adb90.jpg") no-repeat center tops 
index wbd .publicity .ad .btnfwidth:23px;height: 68px;cursor:pointer; position:absolute; top:So%;margin-top: -34px;} 
index wbd .publicity .ad .prev{background:ur1("../images/biaol.png") no-repeat left center;left:s%;} 

index wbd .publicity .ad .next{background:ur1("../images/biao2.png") no-repeat left center;right: 
index wbd .publicity .nav{width: S60px;height: 44px;position: absolute; left:So%;margin-1eft:-430px;bottom: Opx;_bottom: -1px;} 
.index wbd .publicity .nav ,link,sbd .publicity .nav .bgfposition:absolute; left:0px;bortom:opx;} 
.index wbd .publicity .nav ,1inkfz-index 
:index wbd .publicity .nav . 
na 
na 


BEE&REREE 


.index wbd .publicity .nav 1i{float:1left;width:214px;height: 44px;1ine-height: 44px;} 
.index wbd .publicity .nav .1ink 1i{text-align:center;font-size:14px;} 

index #bd .publicity . 
-tndex #bd .publicity . 
.index wbd .publicity . 


;fiter: alpha(opacity=40);border -right:1px solid efff;} 


文件 类 型 C55 ~ 全 局 选项 
加 显示 钳 误 等 天 信息 (方便 对 狂 误 代码 进行 处 理 
回 直接 下 载 压 缩 完成 后 的 代码 ? 行 处 插入 换行 


四 显示 压 缚 的 shell 语 信行 ? 
JavaScript 选项 


回 只 压缩 ， 不 混 涡 
压缩 因 保留 不 重要 的 分 号 (比如 ') 前 而 的 分 号 ). 
图 13.14 使 用 YUI Compressor 在 线 压 缩 CSS 代 码 


压缩 后 的 代码 会 在 几 秒 后 显示 在 网 站 上 ， 如 图 13.15 所 示 。 


当前 体积 : 1.4KB | 原始 体积 : 146KB | 比率 : 95.66% | Gziped: 476byte | 执行 时 间 : 0.50 (s) 


.index sbd .publicity{position:relative;height: 435px}. index sbd .publicity .adfpositionsrelarivej.index sbd .publicity -ad ul 
i{height: 43spx; display: none}. index sbd .publicity .ad ul 11.show{display:block}. index sbd .publicity .ad 

a{display: block;width: 100%; he1ght: 100%;margin:0 auto}. index sbd .publicity .ad .adi{background:ur1("../temp/x80.jpg") no-repeat 
center top}.index sbd .publiciry .ad .ad2{background:ur1("../temp/adb90.Jpg") no-repeat center top}.index sbd .publiciry .ad 
.btn{width:23px;height: 68px; cursor:pointer;position: absolute; top:5o%;margin-top: -34px}. index wbd .publiciry .ad 

-prev{background: ur1("../images/biao1.png”) no-repeat left center;left:sx}.index sbd .publicity .ad .next{background:ur1("../images 
/biao2.png") no-repear left center;right:S%}. index ebd .publicity .nav{width:s60px;height: 44px;position: absolute; left:So%;margin~ 
eft: -430px; bottom: 0;_bottom: -1px}. index sbd -publtcity .nav .1ink,ebd .publiciry .nav 
“bg{position: absolute; left:0;bottom:0}. index sbd .publicity .nav .link{z-index:2}. index bd .publicity .nav .bg{z-ind 
‘sbd .publicity .nav 1i{floar:1eft;width:214px;height: 44px; 1ine-height: 44px}. index sbd .publicirty .nav .1ink 11frext- 
align: center;font-size:14px}, index ebd .publicity .nav ,1ink 11 afcolor:afff].index sbd .publicity .nav .bg 
11{background: #000; opacity: ,4;f1iter: alpha(opacity=40);border -right:1px so11d sfff}.index sbd .publicity ,nav .bg 
11.noborder {border:0} 


.index 


图 13.15 压缩 后 的 CSS 代 码 


购买 空间 和 域名 


网 站 建成 之 后 ， 需 要 购买 一 个 网 站 空间 才能 发 布 网 站 内 容 ， 选 择 网 站 空间 时 ， 主 要 应 考 
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虑 的 因素 包括 : 网 站 空间 的 大 小 、 操 作 系 统 、 对 一 些 特殊 功能 如 数据 库 的 支持 、 网 站 空间 的 
稳定 性 和 速度 、 网 站 空间 服务 商 的 专业 水 平等 。 

域名 注册 服务 商 很 多 ， 在 购买 域名 时 主要 应 考虑 域名 管理 权限 、 续 费 价格 以 及 域名 注册 
商 的 资质 等 。 


13.3 上 传 网 站 


检查 并 压缩 代码 后 ， 就 可 以 将 所 有 网 站 文件 上 传 到 服务 器 了 。 常 见 的 上 传 文件 工具 有 
CuteFTP、FileZilla、FlashFXP 等 。 
无 论 上 传 何 种 数据 文件 到 服务 器 ， 首 先 需 要 具备 以 下 的 条 件 : 


@ 拥有 服务 器 的 账户 名 和 密码 。 如 果 没 有 ， 是 无 法 上 传 文件 的 ， 因 为 如 果 没 权限 ， 则 
服务 器 不 提供 上 传 服务 。 
e 在 本 地 计算 机 中 安装 好 FTP 软 件 。 


下 面 简 单 介绍 一 款 上 传 文件 工具 FileZilla 的 使 用 方法 。FileZilla 是 一 种 快速 、 可 信赖 的 上 
传 工具 ， 功 能 强大 ， 操 作 步 骤 如 下 。 


(1) 首先 安装 FileZilla， 安 装 完成 后 ， 打 开 FileZilla， 单 击 “文件 ” |“ 站 点 管理 器 ” 菜 
单 ， 如 图 13.16 所 示 。 


园 Fezie 二 富村 
仿 误 昌吉 看 M， 传 编 [服务 器 (9 书 和 (8) 
站 点 管理 器 (9) 
a 


新 标签 (T) 
关闭 标签 (0) 


导出 (6 
导入 QD. 


显示 正在 被 编辑 的 文件 (H).… 
退出 00 


图 13.16 单 击 “ 文 件 ”|“ 站 点 管理 器 ”菜单 


(2) 打开 “站 点 管理 器 ”对 话 框 ， 单 击 “ 新 站 点 ”按钮 ， 如 图 13.17 所 示 。 


239 


人 | DIV+CSS 布 局 与 样式 之 网 站 设计 基础 


图 13.17 单 击 “ 新 站 点 ”按钮 


(3) 输入 主机 地 址 、 用 户 名 、 密 码 等 ， 单 击 “ 连 接 ” 按 钮 ， 如 图 13.18 所 示 。 


园 Fezne LelIB@LRg 
EECEETVRCURCETSEEORCECOREEESEECJ 
EBAlpi ata PoE- EE 


| 队列 的 文件 | 传输 关中 “ 传 久 记功 | 


图 13.18 输入 主机 地 址 、 用 户 名 、 密 码 


(4) 成 功 连接 后 ， 软 件 会 显示 “本 地 站 点 ”和 “远程 站 点 ”的 文件 目录 ， 如 图 13.19 所 
示 。 左 边 显示 的 是 本 地 计算 机 的 文件 目录 列表 ， 右 边 显示 的 是 远程 服务 器 的 目录 列表 ， 接 下 
来 就 可 以 在 两 个 小 窗口 里 上 传 或 下 载 文 件 了 。 上 传 文件 就 是 选择 本 地 的 文件 ， 直 接 拖 到 右边 
服务 器 的 相应 位 置 ， 即 可 开始 上 传 ， 如 果 想 下 载 文件 ， 先 在 左边 窗口 的 本 地 电脑 中 选择 一 个 
存储 文件 的 位 置 ， 然 后 选择 服务 器 上 的 文件 ， 拖 到 左边 ， 即 可 实现 下 载 。 
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Home wH 192.1680121.2121 - FicZhas st 站 一 


te Ratu ER aor: [ES 


RN a -er 
当 棕 信 汐 水 她 计 江 视 的 文件 目录 2 前 操作 的 服务 器 的 文件 目录 
-es 
a $ 济 时 Vidsos 
Bsal 文件 大 小 文件 关于 二 返修 改 四 | 二 六 科大 小 六 4 产 型 生 近 焰 改 权限 
Bumpenlinarueo]l24l Galea maa0l mw 2 01Ua125 hd151 me -vin2apk 26756 ARK 文 作 。 2010/5/21 17. 
ent ee 9 Ee 
Ee Se re a 
2 a ne 
es ssa nto 抽 t 全 
Ss 和 
a Be 5 
| ee 


县 吉本 地 文件 方向 “这 六 件 xXh MR 


| 列队 和 9 文件 伟 畏 二 胎 【 成 1 伟 辆 


图 13.19 通过 FileZilla 连接 到 服务 器 


13.4 维护 与 运营 


网 站 在 发 布 后 不 能 任 由 其 发 展 ， 后 期 要 一 直 进 行 维护 和 更 新 ， 主 要 包括 网 站 流量 监控 、 
户 行为 研究 、 网 站 日 常 更 新 及 内 容 编辑 、 网 络 营销 策划 及 推广 等 。 另 外 网 站 发 布 后 要 及 时 
行 推广 ， 主 要 通过 媒体 或 者 网 络 进行 宣传 ， 以 达到 更 多 的 访问 量 。 

在 实际 项 目 中 ， re 运行 网 站 的 服务 器 进行 测试 、 对 网 站 程序 代码 进行 检 
查 和 新 功能 更 新 等 。 运 营 包 括 对 网 站 内 容 的 更 新 、 网 站 新 栏目 的 添加 、 与 网 友 互动 活动 的 开展 


等 。 


搜 


13.5 读者 常见 问题 


本 节 将 主要 介绍 读者 在 网 站 发 布 时 常见 的 问题 ， 主 要 包括 如 何 通过 互联 网 新 建 的 网 站 、 
索引 擎 收录 网 站 以 及 网 站 备案 。 
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13.5.1 如 何 让 别人 通过 互联 网 访问 我 的 网 站 


网 站 制作 好 后 ， 保 存在 自己 的 电脑 里 面 别人 是 无 法 访问 的 ， 要 让 别人 能 够 访问 你 的 网 
站 ， 还 需要 将 这 些 网 站 内 容 发 布 到 互联 网 上 ， 这 就 需要 有 一 个 域名 和 一 个 网 站 空间 。 可 以 先 
购买 虚拟 主机 ， 然 后 注册 域名 ， 注 册 好 的 域名 通过 “域名 解析 ”， 把 域名 与 虚拟 主机 的 IP 地 
址 对 应 起 来 ， 最 后 ， 把 制作 好 的 网 站 文件 上 传 到 网 站 空间 ， 如 果 一 切 正常 的 话 ， 就 可 以 通过 
域名 访问 自己 的 网 站 了 。 


13.5.2 如 何 能 让 百度 、 谷 歌 等 收录 我 的 网 站 


比较 大 的 搜索 引擎 是 百度 和 谷歌 ， 新 制作 的 网 站 被 这 两 大 搜索 引擎 搜索 一 般 需 要 一 周 左 
右 的 时 间 。 

若 要 被 快速 收录 ， 需 要 向 百度 或 谷歌 提交 网 站 ， 首 先 找到 搜索 引擎 的 提交 入 口 ， 就 可 以 
进行 提交 。 

在 提交 网 站 前 ， 应 确保 网 站 已 经 制作 好 ， 没 有 较 大 的 改动 时 再 进行 提交 ， 因 为 当 网 站 提 
交 后 ， 并 且 有 比较 频繁 的 修改 时 ， 即 使 网 站 被 收录 了 ， 后 续 的 反映 也 会 很 差 ， 例 如 排名 上 升 
很 慢 、 快 照 更 新 太 慢 等 。 

提交 网 站 后 ， 原 创 内 容 最 好 能 够 持续 更 新 。 经 常 更 新 网 站 的 原创 内 容 有 利于 搜索 引擎 快 
速 收录 网 站 。 

新 站 在 被 搜索 引擎 收录 的 期 间 ， 应 该 提高 外 链 数量 ， 可 以 去 与 网 站 内 容 相 关 的 论坛 或 者 
信息 发 布 平台 去 发 布 链接 。 


13.5.3 网 站 是 否 要 备案 


网 站 备案 是 指向 主管 机 关 报告 、 存 案 以 备查 考 ， 目 的 是 为 了 防止 在 网 上 从 事 非 法 的 网 站 
经 营 活动 ， 打 击 不 良 互 联网 信息 的 传播 。 如 果 网 站 不 备案 的 话 ， 很 有 可 能 被 查处 以 后 关 停 ， 
可 以 登录 信息 产业 部 的 网 上 工作 平台 在 线 申 请 备案 。 
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颜色 的 英文 名 称 


附录 和 A HTML 中 支持 的 


1. W3C 规 定 的 16 色 


颜色 名 称 


W3C 就 是 World Wide Web Consortium， 即 全 球 万 维 网 联盟 的 简称 。 它 主要 研究 Web 规 范 
和 指导 方针 ， 致 力 于 推动 Web 发 展 ， 保 证 各 种 Web 技 术 能 很 好 地 协同 工作 ，W3C 规 定 的 16 色 
如 表 A.1 所 示 。 


黑 


中 文 含义 


表 A.1 W3C 规 定 的 16 色 


# 下 FFFFF 
#FF0000 
#FFFFO00 


#00FFFF 
#0000FF 
#FFOOFF 
#808080 
#COCOCO 


十 六 进 制 颜色 码 


十 进 制 RGB 颜色 值 


255,255,255 


255,255.0 


0,255,255 


255.,0,255 
128.128,128 


192.192,192 


#800000 128.0.0 
#808000 128.128,0 
#008000 0.128.0 
#008080 0.128.128 
#000080 0.0.128 
#800080 128.0.128 


2. 网 络 安全 色 
Web 颜 色 只 有 216 色 ， 所 以 网 络 上 的 安全 色 就 是 指 Web 所 能 反映 、 所 能 支持 的 216 色 。 这 


里 给 出 表 A.2 是 为 了 让 读者 更 清楚 网 络 中 可 以 了 
中 合 六 
0 合适 


适 的 色彩 。 


E 常 显示 的 颜色 ， 从 而 在 创建 网 页 的 时 候选 择 更 


镶 、|DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


网 络 安全 色 的 十 六 进 制 颜色 码 都 是 可 以 被 33 整 除 的 值 ， 例 如 的 30066、#CC0099 等 。 
表 A.2 网 络 安全 色 
十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 


ro 
#0099CC 0.153.204 #9999CC 153.153.204 


#00CCFF 0.204,255 #99CCFF 153.204.255 
#00FF00 0.255.0 #99FF00 153.255,0 


#00FF33 255.51 #99FF33 153,255,51 
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附录 A HTML 中 支持 的 颜色 名 称 


( 续 表 ) 
十 六 进 制 颜色 码 十 进 制 RGB 颜 色 值 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 
#00FF66 0.255.102 #99FF66 153.255.102 


#00FF99 0,255,153 #99FF99 153,255,153 


#00FFCC 0,255,204 #99FFCC 153,255.204 


#00FFFF 0.255.255 #99FFFF 153,255,255 


#330000 S1.0.0 #CC0000 204.0.0 


#330033 51,0,51 #CC0033 204.0.51 


#330066 51,0,102 #CC0066 204.0.102 


#330099 51,0,153 #CC0099 204.0,153 


#3300CC 51,0,204 #CCOOCC 
#3300FF #CCOOFF 


#333300 51,51,0 #CC3300 204.51.0 


204.0.204 


51,0,255 204,0,255 
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全 |DIV+CSS 布 局 习 式 之 网 站 设计 基础 


表 ) 
十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 
#33FF00 #CCFF00 


S1.255.0 204,255.0 


#33FF33 51,255,51 #CCFF33 204,255.,51 


#33FF66 1,255,102 #CCFF66 204,255.102 


#33FF99 S251 #CCFF99 204,255.153 


#33FFCC 51,255,204 #CCFFCC 204,255,204 


#33FFFF S1255,25$ #CCFFFF 204,255,255 


#660000 102.0.0 #FF0000 255.0.0 


#660033 102,0,51 #FF0033 255,0,51 


#660066 102,0,102 #FF0066 
#660099 #FF0099 


#6600CC 102.0,204 #FFOO0CC 255,0,204 


255,0,102 


102,0,153 255,0,153 
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附录 A_HTML 中 支持 的 颜色 名 称 


十 六 进 制 颜色 码 十 进 制 RGB 颜色 值 十 六 进 制 颜色 码 


( 续 表 ) 
十 进 制 RGB 颜 色 值 


#66CCCC 102,204.204 #FFCCCC 255,204,204 


#66CCFF 102,204,255 #FFCCFF 
#66FF00 102,255.0 #FFFFO00 


3. IE 中 的 预 命名 颜色 
在 下 浏览 器 


255,204,255 
255,255.0 
255,255,51 
255,255.102 
235,255.153 
255,255,204 
255,255,255 


， 有 一 些 颜色 可 以 直接 采用 英文 名 称 来 设置 ， 表 A.3 给 出 的 颜色 就 是 到 目前 


为 止 ， 本 汪汪 过 颜色 英文 名 称 设置 ， 并 能 在 下 浏览 器 中 正常 显示 的 颜色 。 
表 A.3 在 IE 版 本 中 预 命名 的 颜色 


颜色 的 英文 名 称 中 文 含义 


ED 
EE 


blueviolet 


十 六 进 制 颜色 码 


#8A2BE2 


十 进 制 RGB 颜 色 值 
240,248,255 
250,235,215 
0,255,255 
127,255,212 
240,255,255 
245.245,220 
255.228,196 


255,235,205 


138.43.226 


brown #A52A2A 165.42.42 
burlywood #DEB887 222.184.135 
cadetblue #5F9EAO 95.158.160 
chartreuse 黄 绿色 #7FFF00 127.255.0 
chocolate 巧克力 色 #D2691E 210.105.30 
coral 珊瑚 色 #FF7F50 255.127.80 
cornflowerblue 能 蓝 色 #6495ED 100.149.237 
comsilk 米 稠 色 #FFF8DC 255.248.220 
crimson 深 红色 #DC143C 220.20.60 
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( 续 表 ) 
颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜 色 值 
cyan 蓝 #00FFFF 0.255.255 
darkblue 深 #00008B 0.0.139 
darkcyan 深 青 #008B8B 0.139.139 
darkgoldenrod 暗 金色 #B8860B 184.134.11 
darkgray 深 灰 色 #A9A9A9 169.169.169 
darkgreen 深 绿 色 #006400 0.100.0 
darkkhaki 深 神 #BDB76B 189.183,107 
darkmagenta 暗 红 紫 色 #8B008B 139.0,139 
darkolivegreen 深 橄 槛 绿色 #556B2F 85,107,47 
darkorange 暗 桔 黄 色 #FF8CO0 255,140,0 
darkorchid 深 紫 色 #9932CC 153.50.204 
darkred 暗 红色 #8B0000 139.0.0 
darksalmon 瞳 肉色 #E9967A 133,150,122 
darkseagreen 深 灰 绿色 #8FBC8B 143.188.139 
darkslateblue 深海 蓝 色 #483D8B 72.61.139 
darkslategray 暗 瓦 灰色 #2F4F4F 47.79.79 
darkturquoise 深 宝 石 蓝 #00CED1 0.206.209 
deeppink 深 粉 红色 #FF1493 255.20.147 
deepskyblue 上 暗 天 蓝 色 #00BFFF 0,191,255 
dimgray 暗 灰 色 #696969 105,105,105 
dodgerblue 闪 灰 色 #1E90FF 30,144,255 
firebrick 火 砖 色 #B22222 178.34.34 
floralwhite 花白 #FFFAFO 255.250.240 
forestgreen 森林 绿 #228B22 34.139.34 
fuchsia 紫红 色 #FFOOFF 255,0,255 
gainsboro 淡 灰色 #DCDCDC 220,220,220 
ghostwhite 幽灵 白 #8F8FF 248.248.255 
gold 金色 左 FD700 255.215.0 
goldenrod 金 甬 麟 色 #DAA520 218.165.32 
gray 灰色 #808080 128.128.128 
green 绿色 #008000 0.128.0 
greenyellow 黄 绿色 #ADFF2F 173,255.47 
honeydew 窄 白色 #FOFFFO 240.255.240 
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附录 人 HTML 中 支持 的 颜色 名 称 


( 续 表 ) 
颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜 色 值 
热 粉 红色 #FF69B4 255.105.180 
印第安 红 #CDSC5C 205.92.92 
靛青 色 #4B0082 75.0.130 
象牙 色 #FFFFFO 255,255,240 
黄 褐色 #F0E68C 240.230.140 
lavender 莉 衣 草 色 ， 淡 兹 色 #E6E6FA 230,230,250 
lavenderblush 淡 紫 红色 #EFFOF5 255,240,245 
lawngreen 草绿 色 #7CFCO0 124.252.0 
lemonchiffon 柠 标 稠 色 #FFFACD 255.250,205 
lightblue 亮 蓝 色 #ADD8E6 173,216,230 
#90EE90 144.238,144 
#D3D3D3 211.211.211 
lightpink 亮 粉色 #FFB6C1 255.182.193 
lightsalmon 亮 柠 标 色 #FFAO7A 255.160.122 
lightseagreen 亮 水 绿色 #20B2AA 32,178,170 
lightskyblue 亮 天 蓝 色 #87CEFA 135.206.250 
lightslategray 亮 瓦 灰 色 #778899 119,136.153 
lightsteelblue 亮 金属 色 #B0C4DE 176.,196,222 
lightyellow 亮 黄 色 #FFFFEO 255.255,224 
lime 酸 栖 色 #00FF00 0.255.0 
limegreen 橙 绿色 #32CD32 50.205.50 
linen #FAFOE6 250.240.230 
magenta #FFOOFF 255,0,255 
maroon #800000 128.0.0 
mediumaquamarine #66CDAA 102.205.170 
mediumblue #0000CD 0.0.205 
mediumorchid #BAS5D3 186.85.211 
mediumpurple #9370DB 147.112.219 
mediumseagreen #3CB371 60.179.113 
mediumslateblue #7B68EE 123.104.238 
mediumspringereen #00FA9A 0.250.154 
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( 续 表 ) 
颜色 的 英文 名 称 中 文 含义 十 六 进 制 颜色 码 十 进 制 RGB 颜 色 值 
mediumturquoise #48D1CC 72.209.204 
mediunmvioletred #C71585 199.21.133 
midnightblue #191970 25,25,112 
mintcream #F5FFFA 245,255,250 
mistyrose #FFE4E1 255,228,225 
moccasin #FFE4B5 255,228,181 
navajowhite #FFDEAD 255,222,173 
navy #000080 0.0.128 
oldlace #FDFSE6 253,245,230 
olive #808000 128.128.0 
olivedrab 深 绿 褐色 #6B8E23 107.142.35 
As ET 
#FFEFDS 255.239,213 
#DDAODD 221.160.221 
powderblue 粉 蓝 色 #BOE0OE6 176.224.230 
Purple 紫色 #800080 128.0.128 
Ted 红色 #EF0000 255.0.0 
rosybrown 褐 玫瑰 红 #BCS8FSF 188.143.143 
royalblue 皇家 蓝 #4169E1 65.105.225 
saddlebrown 重 褐色 #8B4513 139.69.19 
salmon 鲜 肉色 #FA8072 250.128.114 
sandybrown 沙 褐色 #4A460 244.164.96 
seagreen 海 绿 色 #2E8B57 46.139.87 
seashell 海 贝 色 #FFFSEE 255.245.238 
sienna 赭 色 #A0522D 160.82.45 
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附录 A_HTML 中 支持 的 颜色 名 称 


颜色 的 英文 名 称 十 六 进 制 颜色 码 


( 续 表 ) 
十 进 制 RGB 颜 色 值 


silver #C0COCO 192.192.192 
skyblue #87CEEB 135.206.235 
slateblue #6ASACD 106.90,205 
slategray #708090 112.128.144 
SDOW #FFFAFA 255.250,250 
springgreen S #00FF7F 0,255,127 
steelblue 兰 #4682B4 70.130,180 
tan 色 #D2B48C 210.180.140 
#008080 0.128.128 


teal 水 鸭 色 
TT 7 
TT IC 


216,191,216 
255,99,71 
64.224.208 
238,130,238 
245,222,179 
255,255,255 
245,245,245, 
255.255,0 


154.205,50 


251 


附录 BB CSS 常 用 的 属性 


1. 文字 属性 
文字 属性 主要 包括 字体 、 段 落 、 文 字 布 局 等 方面 ， 如 表 B.1 所 示 。 
表 B.1 文字 属性 

属性 功能 
ET 
9 
WN 
a 
A 
we 
CT 
a 
CE TD 
与 direction 一 起 设置 文本 反 排 
Re 
FA 
XA 
a 
text-decoration 设置 文字 修饰 
text-underline-position 设置 下 划 线 的 线条 位 置 
word-spacing 单词 间隔 
letter-spacing 字符 间隔 
text-transform 文本 转换 
text-indent 文本 缩 进 
line-height 文本 行 高 
we 

2. 背景 属性 


背景 属性 可 以 设置 页 面 和 表格 的 背景 颜色 、 背 景 图 像 ， 如 表 B.2 所 示 。 


附录 B CSS 常用 的 属性 


表 B.2 元 素 的 背景 


background-color 


设置 背景 颜色 


background-image 


背景 图 像 


background-repeat 


图 像 的 平 铺 


background-attachment 


background-position 


| 
图 像 与 页 面 的 布局 | 
图 像 位 置 | 


background 


3. 边框 属性 


背景 的 复合 属性 ， 可 以 简洁 地 设置 背景 颜色 、 背 景 
图 像 、 平 铺 属 性 等 


边框 属性 常常 用 于 设置 表格 效果 ， 也 可 以 应 上 


其 他 带 有 边框 的 元 素 ， 例 如 层 元 素 ， 甚 


至 还 可 以 给 段落 文字 添加 边框 效果 ， 如 表 B.3 所 示 。 


表 B.3 边框 属性 
属性 功能 
ET 
ET 
有 
的 
让 
border-top-color 上 边框 的 颜色 
Rae 
Ta 
ET 
ET 
上 机 
border-right-width 右边 框 的 宽度 
border-bottom-width 下 边框 的 宽度 
border-width 设置 边框 的 宽度 
border-top 设置 上 边框 
border-right 设置 右边 框 
border-bottom 设置 下 边框 
border-left 设置 左边 框 
border 设置 边框 的 整体 效果 
border-style 设置 框架 中 的 边框 风格 
border-collapse 表格 相 邻 边框 的 合并 
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人 贸 、|DIV+CSS 布 局 5 样式 之 网 站 设计 基础 


4. 边 距 与 补 白 
边 距 和 补 白 都 是 为 了 控制 页 面 的 松紧 程度 而 提供 的 属性 ， 如 表 B.4 所 示 。 
表 B.4 边 距 与 补 白 属性 


margin-top 


margin-bottom 


margin-left 


5. 区 块 属性 


区 块 也 被 称 为 容器 ， 一 般 是 指 能 够 容纳 页 面 元 素 的 元 素 ， 例 如 层 。 区 块 属 性 主要 包括 对 
象 的 定位 属性 、 大 小 设置 、 元 素 的 布局 等 内 容 ， 如 表 B.5 所 示 。 


表 B.5 区 块 属性 


属性 


Position 


元 票 距 离 下 端的 水 平 


浮动 属性 


清除 属性 

可 视 区 域 
overflow 超出 范围 
overflow-x 设置 水 平方 向 超出 范围 的 处 理 方式 
overflow-y 设置 垂直 方向 超出 范围 的 处 理 方式 
visibility 可 见 属性 
width 、height 尺寸 设置 
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ee 附录 B_CSS 常 用 的 属性 


6. 其 他 属性 


使 用 涯 镜 属 性 可 以 把 一 些 特别 的 效果 添加 到 HTML 元 素 中 ， 列 表 符号 属性 则 可 设置 页 面 


中 列表 的 样式 ， 光 标 属 性 用 


所 示 。 


filter 


于 设置 光标 的 形状 ， 滚 动 条 属性 用 于 设置 滚动 条 的 效果 ， 如 表 B.6 


表 B.6 其 他 CSS 属 性 


使 用 滤 镜 创建 特殊 效果 


list-style-type 


列表 符号 


list-style-image 


图 像 符号 


list-style-position 


list-style 


scrollbar-face-color ; 
scrollbar-highlight-color 滚动 条 的 亮 边 颜色 


scrollbar-shadow-color 滚动 条 的 暗 边 颜色 


和 


scrollbar-base-color 滚动 条 的 基本 颜色 


